views:

9002

answers:

29

What is the best way to create rounded corners using CSS?

+1  A: 

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

Stan
+43  A: 

I don't know if you can say that there is any one technique that is "the best". Below are 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
Yaakov Ellis
i find DD_roundies to be the prefect solution: http://www.dillerdesign.com/experiment/DD_roundies/#nogo
vsync
@vsync but it's not well supportedin IE8 http://www.dillerdesign.com/experiment/DD_roundies/#supported_browsers
metal-gear-solid
useful link if you decide to go with CSS3 (like SO) http://border-radius.com/ (another ref. http://www.css3.info/border-radius-apple-vs-mozilla/)
al nik
+43  A: 

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..

Jeff Atwood
"...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.
Carl Camera
I would prefer using this method. If a browser doesn't support it, who cares?
Sam Murray-Sutton
Twitter downgrades the rounded corner feature to pointed corners on their website to IE users. Not a big deal really.
Lance Fisher
Terry Pratchett reference?
Joel Coehoorn
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. :)
thSoft
I want to vote this answer down, because it doesn't describe what the answerer (Jeff) thinks is the best way.
allyourcode
+4  A: 

There are some really nice JQuery implementations to do rounded corners - http://www.methvin.com/jquery/jq-corner-demo.html

Jonas Follesø
+11  A: 

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.

Lance Fisher
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
Simon_Weaver
CurvyCorners (http://www.curvycorners.net/) and ShadedBorder (http://www.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.
Ben
This answer doesn't contain nearly enough details for someone to implement what the answerer is thinking.
allyourcode
+3  A: 

There's always the JavaScript way (see other answers) but since it's is purely styling, I'm kind of against use client scripts to achieve this.

The way I prefer (though it has its limits), is to use 4 rounded corner images that you will position in the 4 corners of your box using CSS:

<div class="Rounded">
    // content
    <div class="RoundedCorner RoundedCorner-TopLeft"></div>
    <div class="RoundedCorner RoundedCorner-TopRight"></div>
    <div class="RoundedCorner RoundedCorner-BottomRight"></div>
    <div class="RoundedCorner RoundedCorner-BottomLeft"></div>
</div>


/********************************
* Rounded styling
********************************/

.Rounded
{
    position: relative;
}

.Rounded .RoundedCorner
{
    position: absolute;

    background-image: url('SpriteSheet.png');
    background-repeat: no-repeat;

    overflow: hidden;

    /* Size of the rounded corner images */
    height: 5px;
    width: 5px;
}

.Rounded .RoundedCorner-TopLeft
{
    top: 0;
    left: 0;

    /* No background position change (or maybe depending on your sprite sheet) */
}

.Rounded .RoundedCorner-TopRight
{
    top: 0;
    right: 0;

    /* Move the sprite sheet to show the appropriate image */
    background-position: -5px 0;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-TopRight
{
    right: -1px;
}

.Rounded .RoundedCorner-BottomLeft
{
    bottom: 0;
    left: 0;

    /* Move the sprite sheet to show the appropriate image */
    background-position: 0 -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomLeft
{
    bottom: -20px;
}

.Rounded .RoundedCorner-BottomRight
{
    bottom: 0;
    right: 0;

    /* Move the sprite sheet to show the appropriate image */
    background-position: -5px -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomRight
{
    bottom: -20px;
    right: -1px;
}


As mentioned, it has its limits (the background behind the rounded box should be plain otherwise the corners won't match the background), but it works very well for anything else.


Updated: Improved the implentation by using a sprite sheet.

GoodEnough
Thanks, this worked nicely for me. I modified it to work with a border.
Ronnie
It can all be simplified using CSS sprites, maybe I'll update my answer.
GoodEnough
There, I updated the code to use a sprite sheet.
GoodEnough
+7  A: 

jQuery is the way i'd deal with this personally. css support is minimal, images are too fiddly, to be able to select the elements you want to have round corners in jQuery makes perfect sense to me even though some will no doubt argue otherwise. Theres a plugin I recently used for a project at work here: http://plugins.jquery.com/project/jquery-roundcorners-canvas

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

Might be slightly out of topic, but I stumbled accross this earlier today (rounded corners in IE an Opera using VML & SVG):
http://www.hackszine.com/blog/archive/2008/08/crossbrowser_rounded_vector_co.html

Didn't dig through it, but looks interesting. Would be nice if incorporated in a framework plugin..

Berzemus
A: 

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.

Likewise. I spent far too long on this, trying to do things as nicely as possible. I concluded that square corners were the future.

izb
A: 

I know you're trying to do this with CSS, but silverlight comes with built in support for corner radius.

TheImirOfGroofunkistan
vsync
A: 

I wrote a blog article on this a while back, so for more info, see here

<div class="item_with_border">
    <div class="border_top_left"></div>
    <div class="border_top_right"></div>
    <div class="border_bottom_left"></div>
    <div class="border_bottom_right"></div>
    This is the text that is displayed
</div>

<style>
    div.item_with_border
    {
     border: 1px solid #FFF;
     postion: relative;
    }
    div.item_with_border > div.border_top_left
    {
     background-image: url(topleft.png);
     position: absolute;
     top: -1px;
     left: -1px;  
     width: 30px;
     height: 30px;
     z-index: 2;
    }
    div.item_with_border > div.border_top_right
    {
     background-image: url(topright.png);
     position: absolute;
     top: -1px;
     right: -1px;  
     width: 30px;
     height: 30px;
     z-index: 2;
    }
    div.item_with_border > div.border_bottom_left
    {
     background-image: url(bottomleft.png);
     position: absolute;
     bottom: -1px;
     left: -1px;  
     width: 30px;
     height: 30px;
     z-index: 2;
    }
    div.item_with_border > div.border_bottom_right
    {
     background-image: url(bottomright.png);
     position: absolute;
     bottom: -1px;
     right: -1px;  
     width: 30px;
     height: 30px;
     z-index: 2;
    } 
</style>

It works quite well. No Javascript needed, just CSS and HTML. With minimal HTML interfering with the other stuff. It's very similar to what Mono posted, but doesn't contain any IE 6 specific hacks, and after checking, doesn't seem to work at all. Also, another trick is to make the inside portion of each corner image transparent so it doesn't block text that is near the corner. The outer portion must not be transparent so it can cover up the border of the non-rounded div.

Also, once CSS3 is widely supported with border-radius, that will be the official best way of making rounded corners.

Kibbee
+1  A: 

Sure, if it's a fixed width, it's super easy using CSS, and not at all offensive or laborious. It's when you need it to scale in both directions that things get choppy. Some of the solutions have a staggering amount of divs stacked on top of each other to make it happen.

My solution is to dictate to the designer that if they want to use rounded corners (for the time being), it needs to be a fixed width. Designers love rounded corners (so do I), so I find this to be a reasonable compromise.

CarmineSantini
+1  A: 

Ruzee Borders is the only Javascript-based anti-aliased rounded corner solution I've found that works in all major browsers (Firefox 2/3, Chrome, Safari 3, IE6/7/8), and ALSO the only one that works when both the rounded element AND the parent element contain a background image. It also does borders, shadows, and glowing.

The newer RUZEE.ShadedBorder is another option, but it lacks support for obtaining style information from CSS.

Nathan Chase
+2  A: 

Here's an HTML/js/css solution that I did recently. There's a 1px rounding error with absolute positioning in IE so you want the container to be an even number of pixels wide, but it's pretty clean.

HTML:

<div class="s">Content</div>

jQuery:

$("div.s")
  .wrapInner("<div class='s-iwrap'><div class='s-iwrap2'>")
  .prepend('<div class="tr"/><div class="tl"/><div class="br"/><div class="bl"/>');

CSS:

/*rounded corner orange box - no title*/
.s{position:relative; margin: 0 auto 15px; zoom:1;}
  .s-iwrap{border: 1px solid #FF9933;}
    .s-iwrap2{margin: 12px;}
  .s .br,.s .bl, .s .tl, .s .tr{
    background: url(css/images/orange_corners_sprite.png) no-repeat;
    line-height:1px; 
    font-size:1px;
    width:9px; 
    height:9px; 
    position:absolute;}
  .s .br{bottom: 0; right:0; background-position: bottom right;}
  .s .bl{bottom: 0; left: 0;background-position: bottom left;}
  .s .tl{top:0; left: 0;background-position: top left;}
  .s .tr{top:0; right: 0;background-position: top right;}

Image is just 18px wide and has all 4 corners packed together. Looks like a circle.

Note: you don't need the second inner wrapper, but I like to use margin on the inner wrapper so that margins on paragraphs and headings still maintain margin collapse. You can also skip the jquery and just put the inner wrapper in the html.

Jethro Larson
+4  A: 

With support for CSS3 being implemented in newer versions of Firefox, Safari and Chrome, it will also be helpful to look at "Border Radius".

-moz-border-radius: 10px;  
-webkit-border-radius: 10px;  
border-radius: 10px;

Like any other CSS shorthand, the above can also be written in expanded format, and thus achieve different Border Radius for the topleft, topright, etc.

-moz-border-radius-topleft: 10px;  
-moz-border-radius-topright: 7px;  
-moz-border-radius-bottomleft: 5px;  
-moz-border-radius-bottomright: 3px;  
-webkit-border-top-right-radius: 10px;  
-webkit-border-top-left-radius: 7px;  
-webkit-border-bottom-left-radius: 5px;  
-webkit-border-bottom-right-radius: 3px;
Brajeshwar
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;
Wolfr
+2  A: 

As an indication of how complex it is to get rounded corners even Yahoo discourages them (see first bulleted point). Granted they were only talking here about 1 pixel rounded corners but its interesting to see that even a company with their expertise has concluded theyre just too much pain to get them working most of the time.

If your design can survive without them then thats definitely the easiest solution.

Simon_Weaver
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.
allyourcode
@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
Simon_Weaver
A: 

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

Simon_Weaver
+9  A: 

As Brajeshwar said: Using the border-radius css3 selector. By now, you can apply -moz-border-radius and -webkit-border-radius for Mozilla and Webkit based browsers, respectively.

So, what happens with Internet Explorer?. Microsoft has many behaviors to make Internet Explorer have some extra features and get more skills.

Here: a .htc behavior file to get round-corners from border-radius value in your CSS. For example.

div.box {
    background-color: yellow; 
    border: 1px solid red; 
    border-radius: 5px; 
    behavior: url(corners.htc);
}

Of course, behavior selector does not a valid selector, but you can put it on a different css file with conditional comments (only for IE).

The behavior HTC file

juanpablob
never understood why so many are concerned with CSS validation. it doesn't matter anything, only DOM validation matters.
vsync
This looks like the way to go.
Matt Olenik
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
+2  A: 

In safari, chrome (I imagine), firefox 2+ and konquerer (and probably others) you can do it in CSS by using 'border-radius'. As it's not officially part of the spec yet, please use a vendor specific prefix

example

#round-my-corners-please {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;

}

The JS solutions generally add a heap of small divs to make it look rounded, or they use borders and negative margins to make 1px notched corners.

IMO, the CSS way is better, as it looks cool, is easy, and will degrade gracefully in IE. This is, of course, only the case where the client doesn't enforce them in IE.

alex
+1  A: 

Here is a post about creating a rounded text inputs with jQuery. No image necessary! http://www.tonyamoyal.com/blog/2009/06/23/text-inputs-with-rounded-corners-using-jquery-without-image/

Tony
+8  A: 

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{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;    
border-radius: 5px; 
}

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

.my_rounded_corners{
border: 1px solid #ccc;

-moz-border-radius-topleft: 10px;
-khtml-border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
border-top-left-radius: 10px;

-moz-border-radius-topright: 0px;
-khtml-border-top-right-radius: 0px;
-webkit-border-top-right-radius: 0px;
border-top-right-radius: 0px;

-moz-border-radius-bottomleft: 4px;
-khtml-border-bottom-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;

-moz-border-radius-bottomright: 10px;
-khtml-border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
}

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.

Sinan.

Sinan Y.
yup same as me :)
Adam Ramadhan
A: 

Don't use CSS, jQuery has been mentioned several times. If you need full control of the background and border of your elements give thejQuery Background Canvas Plugin a try. It places a HTML5 Canvas element in the background and allows yo to draw every background or border you want. Rounded corners, gradients and so on.

Thomas Maierhofer
A: 

Opera does not support border-radius yet (apparently it will be in the release after version 10). In the meantime, you can use CSS to set an SVG background to create a similar effect.

Dan Dyer
+1  A: 

I personally like this solution the best, its an .htc to allow IE to render curved borders.

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

Tristan
A: 

create rectangle div with rounded corners :

http://zahidbin.blogspot.com/2010/02/create-rounded-corner-box-with-css.html

zahid
A: 

There is no "the best" way; there are ways that work for you and ways that don't. Having said that, I posted an article about creating CSS+Image based, fluid round corner technique here:

Box with Round Corners Using CSS and Images - Part 2

An overview of this trick is that that uses nested DIVs and background image repetition and positioning. For fixed width layouts (fixed width stretchable height), you'll need three DIVs and three images. For a fluid width layout (stretchable width and height) you'll need nine DIVs and nine images. Some might consider it too complicated but IMHO its the neatest solution ever. No hacks, no JavaScript.

Salman A
A: 

If you are to go with the border-radius solution, there is this awesome website to generate the css that will make it work for safari/chrome/FF.

Anyway, I think your design should not depend on the rounded corner, and if you look at Twitter, they just say F** to IE and opera users. Rounded corners is a nice to have, and I'm personally ok keeping this for the cool users who don't use IE :).

Now of course it's not the opinion of the clients. Here is the link : http://border-radius.com/

Stephane
A: 

MSDN official answer: Rounded Corners in Internet Explorer

Dasanjos
+2  A: 

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

Sniffer