Question

Is it possible to create a rectangle with rounded edges without using an image? For example:

Thank you.

Answer 1

This is a good tutorial to understand rounded border for any div:

http://www.css3.info/preview/rounded-border/

Or you can round a border of a certain div like this:

#div1 {
-moz-border-radius: 15px; //for mozilla support
-webkit-border-radius: 15px; //for chrome support
border-radius: 15px;
}

in a nut shell:

You can combine these as you like. -webkit-… will only be recognized by WebKit browsers (Chrome, Safari), -moz-… will only be recognized by Mozilla-based browsers (Firefox.)

EDIT:

You can only apply border-radius to td, not tr or table. I’ve gotten around this for rounded corner tables by using these styles:

table { border-collapse: separate; }
td { border: solid 1px #000; }
tr:first-child td:first-child { -webkit-border-top-left-radius: 15px; }
tr:first-child td:last-child { -webkit-border-top-left-radius: 15px; }
tr:last-child td:first-child { -webkit-border-top-left-radius: 15px; }
tr:last-child td:last-child { -webkit-border-top-left-radius: 15px; }

Hope this helps.