round div

[xxmp]

How i can do divs with round corners?

[scrappedcola]

There are a couple of techniques. The one I would suggest looking at is what is generally known as sliding door. A demo/tutorial for it is here: css sliding door.Most use this technique for buttons or tabs but it can be expanded to work with four corners. You will need images for the corners and the background (especially if you have a gradient if no gradient can just have images for the corner pieces).

[Tsakaki]

There's a css3 technique you can use as well, but it only works in Chrome and Firefox, IE hasn't provided support for it yet.

If IE isn't an important browser for your viewers, you can use this block of code in your css:

For all four corners:
desireddivision {
-moz-border-radius: 5px;(rounds all four corners at a 5 pixel radius for firefox)
-webkit-border-radius: 5px;(rounds all four corners at a 5 pixel radius for chrome)
}

For individual corners:
desireddivision {
-moz-border-radius-bottomleft: 5px;(rounds the bottom left corner for 5px in firefox)
-webkit-border-bottom-left-radius: 5px;(rounds bottom left corner for 5px in chrome)
} (to do multiple corners, copy the line of code and replace (bottom) and (left) with desired corner placements, i.e. (top) (right) etc.)

I'd like to reiterate though, that this DOES NOT work in IE. In IE, the only way to achieve this remains using background images.

For more information:
10 CSS3 Properties you Need to be Familiar with

Some of the properties in the list work with IE (usually through a back-door method), and some don't.

[teedoff]

Google has tons of results for one willing to perform a quick search.

Here is a page that has 25 techniques to style rounded corners for divs.

[drjohn]

Missing from the above answers is the css3 styles for up to date browsers, so the full code would look like this

.yourdiv [
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px; /* the css3 code */
}

Always use all three bits of code when you want rounded corners.

Next, you face the problem of IE, which doesn't recognise these styles at all (until IE9 comes out, I think). I use dd_roundies.js for IE. So you Do not need to use images and lots of extraneous code for IE.

All you do is add it in a conditional statement with DD_roundies in it, which only IE can read, and use it as described on it's web page
http://www.dillerdesign.com/experiment/DD_roundies/

This combination is very easy to use. The only snag pops up when you use rounded corners AND drop-shadows on the same div, as DD gets confused a bit by IE's special filters. So it's round corners or shadows for IE, while you can use both for all other browsers

[xxmp]

thank you very much all for your help