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.
Description:
In previous articles I explained CSS Tabbed Menu with rounded corners , jQuery Menu with Bounce effect,jQuery Dropdown menu using CSS and many articles relating to CSS ,jQuery, asp.net. Now I will explain how to create rounded corners for div using CSS without images.
In previous articles I explained CSS Tabbed Menu with rounded corners , jQuery Menu with Bounce effect,jQuery Dropdown menu using CSS and many articles relating to CSS ,jQuery, asp.net. Now I will explain how to create rounded corners for div using CSS without images.
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