CSS Rounded corners: 7 lines of code, without any images | Hacker News Reader

CSS Rounded corners: 7 lines of code, without any images

ashko.blogspot.com

27 pointsnreece26 comments

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.

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.

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

There is no right way to do something this stupid.

most people, excluding hackers of course, probably use ie.

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

Actually nowadays, firefox is 1/5th of the browser market. It's a significant chunk of the market.

At least in Firefox 2, corners made with border-radius are not anti-aliased and look pretty horrible. (Firefox 3 may fix this.)

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.

IIRC, opera also supports this (without a -*- prefix). I think for the individual corners you use -topleft instead of -top-left-.

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.

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.

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

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.

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

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.

Cool. How many browsers does it work in?

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

IE7 seemingly handles it as well.

works in opera and safari.

Konqueror too!

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.

I've never hit a CSS rounded corners solution that met all my requirements:

* No image files (Extra HTTP requests/inflexible to colour changes)

* No extra markup (All the benefits of a clean DOM)

* Cross-browser without relying on parsing bugs (Supporting user choice is good)

* No pixel-based measurements (Visual designs should scale to different browser text sizes and screen resolutions)

Given that, any solution will involve some trade-offs. To me, some non-semantic HTML is a reasonable sacrifice since it is transparent to most users.

Its code hacking, a part of what hackers do. If it was actually Digg material, it would have been on the Digg frontpage by now.

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.

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.

Reply on news.ycombinator.com