This is something I've been playing with for years, and I just did a total rewrite on my 'howto' page on the subject. http://battletech.hopto.org/html_tutorials/rounded_css_borders/template.html the directory http://battletech.hopto.org/html_tutorials/rounded_css_borders is unlocked for ease of access. This is the first semi-completed page for my upcoming site of web tutorials and guides. Only some 80-160 more pages to go... Just thought I'd share. I'm rather proud of this one.
Looking good. I like the Anti-Aliasing trick I'll bookmark your site and check back to see if you have any other tricks I can use
Thanx it is too helpful i'll try on it and cool i had work on it it is also cool kinldy check it out CSS body {font-family:Arial, Helvetica, sans-serif, Tahoma; font-size:11px;} #xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;} #xsnazzy h1 {font-size:2em; color:#000000;} #xsnazzy h2 {font-size:1.5em;color:#a32118; border:0;} #xsnazzy p {padding-bottom:0.5em;} #xsnazzy h2 {padding-top:0.5em;} #xsnazzy {background: transparent; margin:1em;} .xtop, .xbottom {display:block; background:transparent; font-size:1px;} .xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;} .xb1, .xb2, .xb3 {height:1px;} .xb2, .xb3, .xb4 {background:#f7f7f7; border-left:1px solid #a32118; border-right:1px solid #a32118;} .xb1 {margin:0 5px; background:#a32118;} .xb2 {margin:0 3px; border-width:0 2px;} .xb3 {margin:0 2px;} .xb4 {height:2px; margin:0 1px;} .xboxcontent {display:block; background:#f7f7f7; border:0 solid #a32118; border-width:0 1px;} </style> HTML </head> <body> <div id="xsnazzy"> <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b> <div class="xboxcontent"> <h1> nice</h1> <h2>nice</h2> <p> nice</p> </div> <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b> </div>
Someone on opera forums linked me to a site written by an Italian gentleman that he did that with the bold tag about two months after my original... While cute, it has a few 'issues' to me. High global line-height will mess it up again in both opera 8.x and IE5.x - which is why you also need a 1px line-height. the use of a inline element that has semantic meaning, then making it display:block doesn't seem very... SEO It's class heavy... The object is to move data OUT of the HTML and into the CSS. But it is interesting to see how different people approach the same problem. Gets one thinking in different directions.
I like the concept. I may use it for a few simple corners with a 5px radius but for the most part I think I'll stick with image alternatives.
Its really a great work Deathshadow .. I'll be using imageless rounded corners from now on..And Thanks for the sharing.
You all should see what else he's working on. Too bad his schedule is conflicting with mine right now, otherwise I'd let him bounce ideas off of me again.