News for hackers. Stuff that matters.

A comment on CSS Rounded corners: 7 lines of code, without any images.

Re:CSS Rounded corners: 7 lines of code, without any images by makecheck on Tuesday May 27, 2008 @10:43PM (#201711)
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.

[ Parent | on HN ]
Re:CSS Rounded corners: 7 lines of code, without any images by GHFigs on Tuesday May 27, 2008 @11:36PM (#201749)
Amen! 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.

[ Parent | on HN ]
Re:CSS Rounded corners: 7 lines of code, without any images by zenspider on Wednesday May 28, 2008 @02:54AM (#201845)
I don't disagree with using the extensions...

... but ...

if you're actually writing 15 lines per box, you're doing it wrong.

refactor refactor refactor

[ Parent | on HN ]
Re:CSS Rounded corners: 7 lines of code, without any images by GHFigs on Wednesday May 28, 2008 @09:35AM (#202045)
There is no right way to do something this stupid.
[ Parent | on HN ]
Re:CSS Rounded corners: 7 lines of code, without any images by henryw on Tuesday May 27, 2008 @10:46PM (#201715)
most people, excluding hackers of course, probably use ie.
[ Parent | on HN ]
Re:CSS Rounded corners: 7 lines of code, without any images by jauco on Wednesday May 28, 2008 @03:28AM (#201868)
so let's give them more reasons to switch :-)
[ Parent | on HN ]
Re:CSS Rounded corners: 7 lines of code, without any images by elai on Wednesday May 28, 2008 @10:15PM (#202878)
Actually nowadays, firefox is 1/5th of the browser market. It's a significant chunk of the market.
[ Parent | on HN ]
Re:CSS Rounded corners: 7 lines of code, without any images by witten on Wednesday May 28, 2008 @05:30AM (#201918)
At least in Firefox 2, corners made with border-radius are not anti-aliased and look pretty horrible. (Firefox 3 may fix this.)
[ Parent | on HN ]
Re:CSS Rounded corners: 7 lines of code, without any images by ajross on Wednesday May 28, 2008 @12:10PM (#202258)
This 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.
[ Parent | on HN ]
Re:CSS Rounded corners: 7 lines of code, without any images by philh on Wednesday May 28, 2008 @03:27AM (#201867)
IIRC, opera also supports this (without a -*- prefix). I think for the individual corners you use -topleft instead of -top-left-.
[ Parent | on HN ]