CSS and round corners: Borders with curves: "In our previous CSS article, CSS and round corners: Boxes with curves13, we outlined a method for creating boxes with rounded corners through the power of CSS. A similar technique can be applied to making borders with round corners. We'll start by inserting our four corner curves as background images through the CSS:
Lorem ipsum dolor sit amet consectetur adipisicing elit
The HTML to achieve this effect is:
<div class='bl'><div class='br'><div class='tl'><div class='tr'>
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div></div></div></div>
And the CSS that makes it all happen:
.bl {background: url(bl.gif) 0 100% no-repeat}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
If you're not sure how this works please consult the article, CSS and round corners: Boxes with curves13 for a full tutorial."
Friday, February 5, 2010
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment