html - Content appears over a corner when using border-radius -
when using css3 border-radius
property create rounded corners how 1 keep content (text, images, etc.) appearing on top of corner?
example:
might hard tell hope guys understand question.
to keep content inside of box, use padding
property:
.box { width: 400px; height: 250px; background-color: gold; border-radius: 20px; padding: 5px; /* or */ /* padding-left: 10px */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
box-sizing: border-box;
used to calculate width , height of element including padding , probable border.
here jsbin demo
Comments
Post a Comment