HTML5 rounded corners

This first example is using the division element, and rounding all corners, followed by 4 more examples of rounding just one particular corner in a division.

<div style=" background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;" >
</div>

Upper left:

<div style=" background-color: #ccc;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
border: 1px solid #000;
padding: 10px;" >
</div>

Upper right:

<div style=" background-color: #ccc;
-moz-border-radius-topright: 15px;
-webkit-border-top-right-radius: 5px;
border: 1px solid #000;
padding: 10px;" >
</div>

Lower left:

<div style=" background-color: #ccc;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
border: 1px solid #000;
padding: 10px;" >
</div>

Lower right:

<div style=" background-color: #ccc;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #000;
padding: 10px;" 
>
</div>

Now a table with rounded corners:

Hi	There
World	and Moon

<table
style=" background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;" >
<tr>
<td>Hi
</td>
<td>There
</td>
</tr>
<tr>
<td>World
</td>
<td>and Moon
</td>
</tr>
</table>

A table with rounded corners and a shadow:

Hi	There
World	and Moon

<table
style=" background-color: #ccc;
box-shadow:5px -5px 10px #700;
-webkit-box-shadow:5px -5px 10px #888;
-moz-box-shadow:5px -5px 10px #334455;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;" >
<tr>
<td>Hi
</td>
<td>There
</td>
</tr>
<tr>
<td>World
</td>
<td>and Moon
</td>
</tr>
</table>

Next a table with rounded corners, shadow and background image:

Hi shadow	This
World	and Moon

<table width="300" height="300"
style=" 
background-image: url(images/car2112.jpg);
box-shadow:5px -5px 10px #700;
-webkit-box-shadow:5px -5px 10px #888;
-moz-box-shadow:5px -5px 10px #334455;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;
-webkit-border-image: url(images/eggstilllife02.png);
-moz-border-image: url(images/eggstilllife02.png);
">

<tr>
<td>Hi shadow
</td>
<td>This
</td>
</tr>
<tr>
<td>World
</td>
<td style="
-webkit-border-image: url(images/eggstilllife02.png);
-moz-border-image: url(images/eggstilllife02.png);
">and Moon
</td>
</tr>
</table>

An image with rounded corners, shadow and a border:

<img width="340" height="256"
src="./images/eggstilllife02.png" 
style="
box-shadow:5px -5px 10px #700;
-webkit-box-shadow:5px -5px 10px #888;
-moz-box-shadow:5px -5px 10px #334455;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;
">

An image with rounded corners, shadow and no border:

<img width="340" height="256"
src="./images/eggstilllife02.png"
style="
box-shadow:15px -15px 10px #700;
-webkit-box-shadow:15px -15px 10px #888;
-moz-box-shadow:15px -15px 10px #334455;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 0px solid #000;
padding: 0px;
">

A background image in a table with with rounded corners, and background images for two cells:

This table is another	hello...
World	and Moon

<table  width="300" height="200"
style="
color:#ffffff; 
background-image: url(images/eggstilllife01.png);
box-shadow:-5px 5px 10px #700;
-webkit-box-shadow:-5px 5px 10px #888;
-moz-box-shadow:-5px 5px 10px #334455;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 1px solid #000;
padding: 10px;
-webkit-border-image: url(images/eggstilllife02.png);
-moz-border-image: url(images/eggstilllife02.png);
">

<tr>
<td style="
background-image: url(images/card07.jpg);">
This table is another
</td>
<td>hello...
</td>
</tr>
<tr>
<td>World
</td>
<td style="
background-image: url(images/card07.jpg);
">
and Moon
</td>
</tr>
</table>

...Rounding the corners of the two cells:

This table is another	hello...
World	and Moon

<table  width="300" height="200"
style="
color:#ffffff; 
background-image: url(images/eggstilllife01.png);
box-shadow:-5px 5px 10px #700;
-webkit-box-shadow:-5px 5px 10px #888;
-moz-box-shadow:-5px 5px 10px #334455;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 1px solid #000;
padding: 10px;
-webkit-border-image: url(images/eggstilllife02.png);
-moz-border-image: url(images/eggstilllife02.png);
">

<tr>
<td style="
background-image: url(images/card07.jpg);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
">
This table is another
</td>
<td>hello...
</td>
</tr>
<tr>
<td>World
</td>
<td style="
background-image: url(images/card07.jpg);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
">
and Moon
</td>
</tr>
</table>

Larger table, mixed cells:

This table is another	hello...	This table is another	hello...	This table is another	hello...	This table is another	hello...
World	and Moon						?

<table  width="800" height="200"
style="
color:#ffffff; 
background-image: url(images/eggstilllife01.png);
box-shadow:-5px 5px 10px #700;
-webkit-box-shadow:-5px 5px 10px #888;
-moz-box-shadow:-5px 5px 10px #334455;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 1px solid #000;
padding: 10px;
-webkit-border-image: url(images/eggstilllife02.png);
-moz-border-image: url(images/eggstilllife02.png);
">

<tr>
<td style="
background-image: url(images/card07.jpg);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
">
This table is another
</td>
<td style="
background-image: url(images/card07.jpg);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
">
hello...
</td>
<td style="
background-image: url(images/card07.jpg);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
">
This table is another
</td>
<td style="
background-image: url(images/card07.jpg);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
">
hello...
</td>

<td style="
background-image: url(images/card07.jpg);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
">
This table is another
</td>
<td style="
background-image: url(images/card07.jpg);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
">
hello...
</td>
<td style="
background-image: url(images/card07.jpg);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
">
This table is another
</td>
<td style="
background-image: url(images/card07.jpg);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
">
hello...
</td>

</tr>
<tr>
<td>World
</td>
<td style="
background-image: url(images/card07.jpg);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
">
and Moon
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>?</td>
</tr>
</table>

It should be obvious that the CSS (Cascading Style Sheet language) used here is redundant and lengthy to write. As such, the CSS should really be in the linked Style Sheet document and thusly become automatic, atonomous, or universal, working with perhaps all of the tables or possibly added in by using a class attribute where a rounded effect is desired.

You may have noted a smaller radius for the cells than the table itself ...in the last example? Good.

I have no example for border-images as it is not yet working in the browser I am using, and yes thank you, I just updated it. LOL. Actually, some code is in place and may be working in your browser?

Next, a bit about canvas, but first we want to say that the examples here are hacked. Yes, they were taken from other sites in our own quest for understanding. We wish to acknowledge the help of the entire world of coders who relentlessly hack each other's code to create ever more helpful and useful stuff. Likewise our examples vary and continue to be unique (in some places) until others hack and extrapolate upon them as well. Copy, paste, modify and test.

Click here for the next tutorial on canvas.