Mathias Hasselmann

CSS vs. Rounded Borders

I used to be a big fan of CSS, W3C and such. Until today, when I tried to implement smooth rounded borders. Just look at this mess:

<div id="example">
 <div class="rt"><div class="rl"><div class="rr"></div></div></div>
 <div class="rc"><div class="rl"><div class="rr">
  Lopem ipsem...
 </div></div></div>
 <div class="rb"><div class="rl"><div class="rr"></div></div></div>
</div>

Not that bad? Well, wait: You've only seen the HTML part, which still is verbose but still kind of acceptable. Now look at the CSS desert:

div.rt { background-position: top center; background-repeat: repeat-x; }
div.rt div.rl { background-position: top left; }
div.rt div.rl div.rr { background-position: top right; }
div.rc div.rl { background-position: left; background-repeat: repeat-y; }
div.rc div.rl div.rr { background-position: right; background-repeat: repeat-y; }
div.rb { background-position: bottom center; background-repeat: repeat-x; }
div.rb div.rl { background-position: bottom left; }
div.rb div.rl div.rr { background-position: bottom right; }
div.rt div.rl, div.rb div.rl div.rr { background-repeat: no-repeat; font-size: 1px; width: 100%; }

div#example div.rt,
div#example div.rt div.rl,
div#example div.rt div.rl div.rr { height: 15px; }

div#example div.rt div.rl,
div#example div.rt div.rl div.rr,
div#example div.rb div.rl,
div#example div.rb div.rl div.rr { background-repeat: no-repeat; }

div#example div.rb,
div#example div.rb div.rl,
div#example div.rb div.rl div.rr { height: 20px; }

div#example div.rt { background-image: url(/media/border/example-tc.png); }
div#example div.rt div.rl { background-image: url(/media/border/example-tl.png); }
div#example div.rt div.rl div.rr { background-image: url(/media/border/example-tr.png); }

div#example div.rc div.rl { background-image: url(/media/border/example-cl.png); }
div#example div.rc div.rl div.rr { background-image: url(/media/border/example-cr.png); padding: 0px 10px; }

div#example div.rb { background-image: url(/media/border/example-bc.png); }
div#example div.rb div.rl { background-image: url(/media/border/example-bl.png); }
div#example div.rb div.rl div.rr { background-image: url(/media/border/example-br.png); }

Had to create custom django tags to deal with this mess.

How is this supposed to be more pretty than stupid old tables? Especially as this hack cannot be easily nested: CSS2 child selectors are ruled out, as Microsoft decided not to implement them in IE6, and using unique class names for every level of nesting is just ridicilous.

Dear W3C people, dear Mozilla, Opera, Safari or even you Microsoft developers: Rounded borders are a common feature in web designs. So can you implement them on CSS level please?

Posted on June 7, 2007 by Mathias Hasselmann « 2 Comments

Tags: CSS, Sucks, Taschenorakel

Comments

Nathan Samson commented on July 5, 2007 at 7:31 p.m.

"Dear W3C people, dear Mozilla, Opera, Safari or even you Microsoft developers: Rounded borders are a common feature in web designs. So can you implement them on CSS level please?"

mozilla has this feature already (-moz-border-radius)
safari has something similar too as far as I know
And it is being implemented in CSS 3 (http://www.w3.org/TR/2002/WD-css3-bor...)

But I guess it will take some time before most users benefit from this improvement

Mathias Hasselmann commented on July 6, 2007 at 7:28 p.m.

Yup, there is this CSS3 feature. Unfortunatly -moz-border-radius neither does antialiasing nor supports drop shadows or similiar effects.

CSS vs. Rounded Borders

Comments

Post a Comment