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
|
0 comments:
Post a Comment