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
|
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
|
|
11 comments :
Your sample no work in IE9: This web page yes, but yor sample code NO.
Test your code example in a separate file, and you'll notice that it does not work in IE9.
@ocando...it will work in IE 9 also that's why we defined different radius for each browser check css class "samplecss"
hi but this is not working ie browser.. pls help me
Hi Suresh the Above code only works in IE9
IE-8 -not working
IE-7 -not working
Its not working on IE browser. Can you check and modify.
We need to Use PIE.htc or PIE.js in order to get round corners in ie-7 and ie-8 browsers
how nice
Hi Suresh the Above code only works in IE9
IE-8 -not working
IE-7 -not working