Curved borders in HTML/CSS?

images.

The most common method involves one block level element with another block level element inside of it. The “bottom” element has a background image with no vertical repeat for the top left and right corners, and the element on top, which contains the content for the widget, has the bottom left and right. This way, as the box expands vertically, the corners move with it.

Download “Firebug” for Firefox and check out some of the elements on a page.
You definitely need an image for the rounded corner to look right.

http://davinci.fluther.com/static/images/v2/bluebar_right.png
http://davinci.fluther.com/static/images/v2/redbar_right.png

You can also do it with CSS and Javascript and several other methods besides images.

Basically you are trying to have Rounded corners. There’s a bunch of ways to do. Here’s one method I like but there are others. Here’s 25 Rounded Corners Techniques with CSS

When building Tweet My Gaming (have you seen it advertised in the sidebar on Twitter.com? ;p) we actually decided to use the border-radius CSS property for WebKit and Mozilla-based browsers. In our opinion, the site looks totally acceptable in Internet Explorer and Opera (and other browsers that don’t have similar support), and Safari, Chrome and Firefox get a little extra visual reward.

The usage of the CSS properties is a lot like:

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

With the first targeting Safari, Chrome and other modern WebKit-based browsers, and the second targeting Mozilla-based Gecko browsers.

Roundedcornr.com You’ll thank me later.