The border-radius property is used to apply rounded corners on various HTML elements such as IMG and TD Now Here We create a Web page name is tablecellrounded.html to learn how to apply the rounded corners in a table.
<!doctype html>
<title>Rounded Corners property in Table</title>
<head>
<style>
body
{
padding:10px 50px;
font:normal 11px auto "Trebuchet MS", verdana, Arial, Helvetica, sans-serif;
color:#4f6b72;
background:#E6EAE9;
}
caption
{
padding:0 0 5px 0;
width:700px;
font:italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align:right;
}
td
{
border-radius:50px;
border-right:1px solid #98ES22;
border-bottom:1px solid #c1ER34;
background:red;
padding:6px 6px 6px 12 px;
color:#4f6b72;
}
img
{
border-radius:50px;
height:100px;
width:100px;
}
table
{
border:1px solid #000;
border-radius:50px;
background:gray;
}
</style>
</head>
<body>
<table>
<caption>Display images in the table</caption>
<tr>
<td>trak</td>
<td><img src="trak.jpg"></td>
</tr>
<tr>
<td>bike</td>
<td><img src="bike.jpg"></td>
</tr>
<tr>
<td>car</td>
<td><img src="car.png"></td>
</tr>
<tr>
<td>cycle</td>
<td><img src="cycle.jpg"></td>
</tr>
</table>
</body>
</html>
Here We use the border-radius property to apply rounded corners on the table and cells.
The output of the above WebPage Is:
<!doctype html>
<title>Rounded Corners property in Table</title>
<head>
<style>
body
{
padding:10px 50px;
font:normal 11px auto "Trebuchet MS", verdana, Arial, Helvetica, sans-serif;
color:#4f6b72;
background:#E6EAE9;
}
caption
{
padding:0 0 5px 0;
width:700px;
font:italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align:right;
}
td
{
border-radius:50px;
border-right:1px solid #98ES22;
border-bottom:1px solid #c1ER34;
background:red;
padding:6px 6px 6px 12 px;
color:#4f6b72;
}
img
{
border-radius:50px;
height:100px;
width:100px;
}
table
{
border:1px solid #000;
border-radius:50px;
background:gray;
}
</style>
</head>
<body>
<table>
<caption>Display images in the table</caption>
<tr>
<td>trak</td>
<td><img src="trak.jpg"></td>
</tr>
<tr>
<td>bike</td>
<td><img src="bike.jpg"></td>
</tr>
<tr>
<td>car</td>
<td><img src="car.png"></td>
</tr>
<tr>
<td>cycle</td>
<td><img src="cycle.jpg"></td>
</tr>
</table>
</body>
</html>
Here We use the border-radius property to apply rounded corners on the table and cells.
The output of the above WebPage Is:
No comments:
Post a Comment