Introduction:
Here I will show how to create CSS rounded corners div without images or create rounded corners for div using CSS or div with rounded corners using CSS without images example.
To create rounded corners for div using CSS without images we need to write the code like as shown below
<html>
<head>
<title>CSS Rounded Corner DIV Table example</title>
<style type="text/css">
body {
font-family: tahoma;
}
div {
width:200px;
background-color:#FFEEDD;
border: 2px solid #ECCE8E;
padding: 5px;
text-align:center;
}
.samplecss
{
border-radius: 10px; /*To make the corners rounded in IE*/
-moz-border-radius: 10px;/*this is for mozilla*/
-webkit-border-radius: 10px; /*chrome and other browsers*/
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div class="samplecss">
<h4>DIV1 Example</h4>
</div>
</td>
<td>
<div class="samplecss">
<h4>DIV2 Example</h4>
</div>
</td>
<td>
<div class="samplecss">
<h4>DIV3 Example</h4>
</div>
</td>
</tr>
</table>
</body>
</html>
|
Live Demo
|
No comments:
Post a Comment