Creating rounded corners using CSS [closed]

Answer 1

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.

Answer 2

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

Answer 3

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://web.archive.org/web/20111120191231/http://plugins.jquery.com:80/project/jquery-roundcorners-canvas

Answer 4

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.

Answer 5

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

Answer 6

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.