3 ms·
At this point in time, it is far easier to just rely on CSS extensions well supported by Firefox and Safari, for instance: -moz-border-radius-topleft: 0.4em;
by makecheck 18y ago
At this point in time, it is far easier to just rely on CSS extensions well supported by Firefox and Safari, for instance:
-moz-border-radius-topleft: 0.4em;
-webkit-border-top-left-radius: 0.4em;
-moz-border-radius-topright: 0.4em;
-webkit-border-top-right-radius: 0.4em;
-moz-border-radius-bottomleft: 0.4em;
-webkit-border-bottom-left-radius: 0.4em;
-moz-border-radius-bottomright: 0.4em;
-webkit-border-bottom-right-radius: 0.4em;
This doesn't mess up your HTML with divs, and degrades seamlessly to "not rounded corners" in any other browser.
- henryw 18y agomost people, excluding hackers of course, probably use ie.
- GHFigs 18y agoAmen! Although to make the point better, you can just use the shorthand: -moz-border-radius: 0.4em; -webkit-border-radius: 0.4em; Seven lines of CSS and fifteen of HTML per box is bullshit when you can do the same thing in a standard and semantically better way in the space of a Twitter message. I can hardly believe people still put so much effort into IE-specific workarounds for purely decorative effects.
- philh 18y agoIIRC, opera also supports this (without a -*- prefix). I think for the individual corners you use -topleft instead of -top-left-.
- witten 18y agoAt least in Firefox 2, corners made with border-radius are not anti-aliased and look pretty horrible. (Firefox 3 may fix this.)
- ajross 18y agoThis technique doesn't antialias the corners either. It just draws tiny background rectangles with careful margins. But it's pretty clever, IMHO. And a few lines of jquery could automatically add the extra markup at load time.