CSS Rounded corners: 7 lines of code, without any images(ashko.blogspot.com)

27 pointsby nreece18 tahun yang lalu26 comments

ashko.blogspot.com

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

http://ashko.blogspot.com/2008/05/just-simple-css-code-of-7-lines-for.html

26 comments

makecheck18 tahun yang lalu

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.

GHFigs18 tahun yang lalu

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.

zenspider18 tahun yang lalu

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

GHFigs18 tahun yang lalu

There is no right way to do something this stupid.

henryw18 tahun yang lalu

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

jauco18 tahun yang lalu

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

elai18 tahun yang lalu

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

witten18 tahun yang lalu

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

ajross18 tahun yang lalu

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.

philh18 tahun yang lalu

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

zach18 tahun yang lalu

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.

oneplusone18 tahun yang lalu

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.

geuis18 tahun yang lalu

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

ajross18 tahun yang lalu

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.

scooter5308018 tahun yang lalu

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

rrwhite18 tahun yang lalu

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.

quickpost18 tahun yang lalu

Cool. How many browsers does it work in?

nreece18 tahun yang lalu

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

michaelr18 tahun yang lalu

IE7 seemingly handles it as well.

rwebb18 tahun yang lalu

works in opera and safari.

pmjordan18 tahun yang lalu

Konqueror too!

geuis18 tahun yang lalu

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.

ambition18 tahun yang lalu

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.

nreece18 tahun yang lalu

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.

henryw18 tahun yang lalu

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.

tdavis18 tahun yang lalu

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.