PDA

View Full Version : Rounded Corner Div with CSS



kslallstar
Mar 11th, 2010, 06:22 PM
I need to create divs with rounded corners in css.
Does anyone know how to do this?

An example of what I need is at www.sandvine.com.

Can this be done without using images for the rounded corners?

Excavator
Mar 11th, 2010, 06:53 PM
Hello kslallstar,
CSS3 does rounded corners with no images but it's not widely supported yet.

There is a method using CSS and no images that works, see a demo here (http://nopeople.com/CSS/rounded%20corners%20-%20CSS%20only/index.html).

kslallstar
Mar 11th, 2010, 07:15 PM
One more thing;
I need to have a outline on the div as well!

drhowarddrfine
Mar 11th, 2010, 07:58 PM
Rounded corners (border-radius) can be done in all modern browsers except you need to use the vendor extension. It is not known if/when IE will ever support border-radius.

Excavator
Mar 11th, 2010, 08:06 PM
Maybe an image would be easier. Have a look at this sliding doors method (http://nopeople.com/CSS/slider/index.html).

Neither of these attempts work on those CSS only boxes -

/*********columns************/
.col1, .col2, .col3 {
width: 200px;
/*outline: 2px solid #f00;*/
border: 2px solid #f00;
}
.col1 {

Major Payne
Mar 12th, 2010, 09:43 AM
CSS Rounded Corners:

http://malsup.com/jquery/corner/
http://www.css3.info/preview/rounded-border/
http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
http://kalsey.com/2003/07/rounded_corners_in_css/
http://www.html.it/articoli/nifty/index.html

Free online Rounded Corner makers:

http://www.roundedcornr.com/
http://www.spiffybox.com/
http://tools.sitepoint.com/spanky/
http://www.spiffycorners.com/
http://www.spiffycorners.com/index.php?sc=spiffy&bg=680000&fg=b20000&sz=5px
http://www.ezroundedcorners.com/
http://www.roundedcornr.com/
http://www.makeuseof.com/dir/rounmycorners-quick-basic-image-editor/

Enjoy.

drhowarddrfine
Mar 12th, 2010, 02:25 PM
{
-moz-border-radius: 5px; // For Firefox
-webkit-border-radius: 5px; // For Safari/Chrome
border-radius: 5px; // For Opera
border: 1px solid #000;
}