
CSS Rounded corners: 7 lines of code, without any images - nreece
http://ashko.blogspot.com/2008/05/just-simple-css-code-of-7-lines-for.html
======
makecheck
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
most people, excluding hackers of course, probably use ie.

~~~
jauco
so let's give them more reasons to switch :-)

------
zach
This is what YouTube used to style their box headers until maybe a year and a
half ago.

Note that if you're using it to make a vertically compact title box, you'll
have to do even more CSS funny business. That's because the rounded-corner
header is a separate entity from the box below it, so you need to tweak the
text to appear above its normal position in the box.

Confession time. Yes, I know because I myself admired YouTube's rounded
corners enough to peek at their CSS and implement this technique as well.
Hugs, not drugs, kids.

------
oneplusone
We have been using this technique on the Freshbooks login pages for a while
now. (example: <http://reason.freshbooks.com>) It enables our customers to
customize their account colors while maintaining the elegance of rounded
corners.

~~~
geuis
you aren't serious are you? Please tell me you website is your own pet project
and that you didnt build it for a paying client or your employer

~~~
ajross
Please. Check the absolutist pedantry at the door. If the technique works and
doesn't affect the content management process (which, remember, is the _real_
reason that people want non-semantic markup out of the HTML -- it's so that
there's a single place to look for the semantic stuff) then by all means go
for it. With just a few lines of jquery you could automate this process based
on a single class tag for the "rounded corner" divs or whatnot, and everyone
wins.

I'm not completely sold that this is easier than image mangement (it probably
is for developers who fear graphics work, less so for designers who fear code
hackery), but it's awfully clever to my eyes.

------
scooter53080
don't know who came up with this first, but it looks strikingly similar to
'nifty corners': <http://www.html.it/articoli/nifty/index.html>

Here is a technique I have used before to add a 'snazzy border':
<http://www.cssplay.co.uk/boxes/snazzy.html>

~~~
rrwhite
Yeah it is essentially the same technique that all those JS rounding libraries
use. The nice thing about the libraries is that you don't have to see all
those extra horseshit DOM elements you need to make this work.

Either way you're going to make a standarista cry.

------
quickpost
Cool. How many browsers does it work in?

~~~
nreece
Did a quick test. Works in IE6 and FF2. Anyone willing to give it a try in
IE7, Opera, and Safari?

~~~
rwebb
works in opera and safari.

~~~
pmjordan
Konqueror too!

------
geuis
why would any developer who didnt want to lose their job use this? There are
lots of things you can do that you shouldn't. So what I can do with one
background image and 2-3 divs and look good, you can do with a series of bold
tags to look bad. Sorry to be critical, but this is not the quality of content
I have come to expect from HN. Digg maybe.

~~~
henryw
because hackers like to do things with less work. creating images means work.
the code does look long though. it should probably be abstracted into a
server-side view helper function.

~~~
tdavis
Less work in this case = horrible results. You're ruining the semantics of the
DOM to use a crappy method for creating rounded corners. Want to create a
fluid box with rounded corners and even less work? Use Javascript. You're not
writing crappy HTML and it's even less work; just tag the <div /> with a
class.

If the quality of the implementation weren't bad enough, this method isn't
even _new_.

