Rounding the corners of a table without a background image?

Question

Is it possible to use round corners (inline) without using a background image?

Answer 1

Live demo

table{ background: red; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } 

sigh and inline ...

 <table style="background: red;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;"> 

Not sure what you mean by converting the cell to a div, though.

Answer 2

This example creates rounded borders at all 5 pixel angles.

 #example{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } 

If you want different rounded borders at different angles or specific rounded corners to change below code

 #example1{ -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 20px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 20px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 5px; border-top-right-radius: 10px; border-bottom-right-radius: 20px; border-bottom-left-radius: 15px; } 

Check out http://border-radius.com/

Answer 3

Yes you can do it. try the code below.

 #example1 { -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; } 

Use this tutorial for more details.

Answer 4

The inline style still applies to email encoding. Therefore, it is relevant.