Issues with CSS Rounded Corners
Posted: Sun Aug 10, 2008 3:11 pm
Hello,
I've been following the tutorial at: http://www.webcredible.co.uk/user-frien ... ders.shtml On how to create a border with curved corners. I followed the 'final product' code exactly, but instead of getting the example they provided as 'what it should look like', I instead get the 2nd example (in the tutorial, the 2nd example is the one that shows both the corners and the straight sections not smoothly connected).
My code looks just like theirs:
And my css
Any someone has experience with creating curved corners, any and all help would be greatly appreciated.
Thank you
I've been following the tutorial at: http://www.webcredible.co.uk/user-frien ... ders.shtml On how to create a border with curved corners. I followed the 'final product' code exactly, but instead of getting the example they provided as 'what it should look like', I instead get the 2nd example (in the tutorial, the 2nd example is the one that shows both the corners and the straight sections not smoothly connected).
My code looks just like theirs:
Code: Select all
<div class="t">
<div class="b">
<div class="l">
<div class="r">
<div class="bl">
<div class="br">
<div class="tl">
<div class="tr">
COOL BEANS!
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Code: Select all
.t {background: url(dot.gif) 0 0 repeat-x; width: 20em}
.b {background: url(dot.gif) 0 100% repeat-x}
.l {background: url(dot.gif) 0 0 repeat-y}
.r {background: url(dot.gif) 100% 0 repeat-y}
.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}
Thank you