Creating rounded corners using CSS

Question

How can I create rounded corners using CSS?

Solution 1

Since CSS3 was introduced, the best way to add rounded corners using CSS is by using the border-radius property. You can read the spec on the property, or get some useful implementation information on MDN:

If you are using a browser that doesn't implement border-radius (Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5), then the links below detail a whole bunch of different approaches. Find one that suits your site and coding style, and go with it.

1. CSS Design: Creating Custom Corners & Borders
2. CSS Rounded Corners 'Roundup'
3. 25 Rounded Corners Techniques with CSS

Solution 2

I looked at this early on in the creation of Stack Overflow and couldn't find any method of creating rounded corners that didn't leave me feeling like I just walked through a sewer.

CSS3 does finally define the

border-radius:

Which is exactly how you'd want it to work. Although this works OK in the latest versions of Safari and Firefox, but not at all in IE7 (and I don't think in IE8) or Opera.

In the meantime, it's hacks all the way down. I'm interested in hearing what other people think is the cleanest way to do this across IE7, FF2/3, Safari3, and Opera 9.5 at the moment..

Solution 3

I generally get rounded corners just with css, if browser does not support they see the content with flat corners. If rounded corners are not so critical for your site you can use these lines below.

If you want to use all corners with same radius this is the easy way:

.my_rounded_corners{
   -webkit-border-radius: 5px;
           border-radius: 5px;
}

but if you want to control every corner this is good:

.my_rounded_corners{
    border: 1px solid #ccc;

    /* each value for each corner clockwise starting from top left */
    -webkit-border-radius: 10px 3px 0 20px;
            border-radius: 10px 3px 0 20px;
}

As you see in each set you have browser specific styles and on the fourth rows we declare in standard way by this we assume if in future the others (hopefully IE too) decide to implement the feature to have our style be ready for them too.

As told in other answers, this works beautifully on Firefox, Safari, Camino, Chrome.

Solution 4

If you're interested in creating corners in IE then this may be of use - http://css3pie.com/

Solution 5

I would recommend using background images. The other ways aren't nearly as good: No anti-aliasing and senseless markup. This is not the place to use JavaScript.

View more solutions

Comments

[Stan]

Here's a good video on how to make rounded corners using only CSS: <sampsonvideos.com/video.php?video=12>

[aruno]

Article on rounded corners techniques from Yahoo Developer network - from 2007. And a way to add rounded corners (requiring images) to a YUI panel.

[SteveCav]

200+ likes says it IS constructive.

[DavidRR]

I believe this is a valuable canonical question that deserves to be reopened, especially since it is now community wiki.

[Jim Garrison]

Except that it is information that is trivially findable many, many other places on the web. There is no need for SO to duplicate existing resources.

[tschoartschi]

"...walked through a sewer?" That's a bit harsh, Jeff. The answer is "It depends." Single color, gradient, or drop-shadow boxes? Do they need to expand vertically, horizontally, or both? Different solutions for different requirements. The fancier the requirement, the more sewer-like the solution.

[Sam Murray-Sutton]

I would prefer using this method. If a browser doesn't support it, who cares?

[Lance Fisher]

Twitter downgrades the rounded corner feature to pointed corners on their website to IE users. Not a big deal really.

[Wolfr]

Your syntax for -webkit-border-bottom-rightright-radius: 3px; and -webkit-border-top-rightright-radius: 10px; should read -webkit-border-bottom-right-radius: 3px and -webkit-border-top-right-radius: 10px;

[aruno]

javascript definitely has the highest scope for failure, and flickering in my experience. all the jquery plugins i've tried have some kind of unexpected side effects

[vsync]

i find DD_roundies to be the prefect solution: dillerdesign.com/experiment/DD_roundies/#nogo

[vsync]

never understood why so many are concerned with CSS validation. it doesn't matter anything, only DOM validation matters.

[mbillard]

It can all be simplified using CSS sprites, maybe I'll update my answer.

[mbillard]

There, I updated the code to use a sprite sheet.

[nickytonline]

@mcaulay - Does it also support giving the box a shadow?

[Ben Regenspan]

CurvyCorners (curvycorners.net) and ShadedBorder (ruzee.com/blog/shadedborder) do manage to support anti-aliasing. There are also ways of using these sans extra markup, you can implement with a class and then the markup is added dynamically to the classed elements. That said, the more I use them the more you seem right...they're useful for prototyping but add a lot of extra weight to the DOM. Now that I've got mine adjusted the way I want, I plan to convert them to images.

[Jitendra Vyas]

@vsync but it's not well supportedin IE8 dillerdesign.com/experiment/DD_roundies/#supported_browsers

[Matthew Olenik]

This looks like the way to go.

[ChenZhou]

I'd definitely use this approach - let's handle things as they are. If someone doesn't use a browser (i.e. IE), they deserve to see rounded corners as angular. :)

[allyourcode]

I want to vote this answer down, because it doesn't describe what the answerer (Jeff) thinks is the best way.

[allyourcode]

This answer doesn't contain nearly enough details for someone to implement what the answerer is thinking.

[allyourcode]

Can you add a brief explanation of what a behavior file is? I think person looking for an answer to this question is not probably going to be familiar with those.

[allyourcode]

I want to find the part of the YUI page that you're talking about, but none of the bullet points I've looked at say that trying to get rounded corners is a bad idea. Can you be more specific? I found one part that discusses talks about how you have to set your widths differently when using rounded corners, but doesn't discourage it.

[aruno]

@allyourcode - i don't see it either anymore. i remember making this post but not exactly what they said. however it looks like in that second link above they mention removing IE support for 1px rounded corners. but in anycase this post was a little tongue in cheek since theyre talking only about 1px corners which i think is a tremendous waste of time! i do remember at the time i wrote this being frustrated in general with rounded corners, and settled on corner images

[mickthompson]

useful link if you decide to go with CSS3 (like SO) border-radius.com (another ref. css3.info/border-radius-apple-vs-mozilla)

[evanmcd]

Seems the behavior file link is dead

[evanmcd]

jquery roundcorners doesn't support IE 8.

[Krishna]

third link is not working cssjuice.com/25-rounded-corners-techniques-with-css

[bharal]

this completely worked for me, along with defining the -moz etc etc corners for other browsers.

[Matt Browne]

CSS3 is good for most situations, if you don't mind it falling back to square corners for older browsers. But sometimes there are graphic design requirements for how the rounded corners should look that go beyond what you can do with border-radius. For those cases I recommend an approach like this one: github.com/stubbornella/oocss/wiki/Module. The only thing I don't like about the linked example is the use of the <b> tag...I think a <span> tag would be more appropriate.