Rounding table corners without background image?
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 really sure what you mean by converting the cell to a div though.
This example will create rounded borders on all corners of 5 px
#example{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
If you want different rounded borders on different corners, or specific rounded corners modify the 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/
Yes you can do this. try the below code.
#example1 {
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
}
For more details use this tutorial.