Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

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.

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

For live demo check below divs

DIV1 Example

DIV2 Example

DIV3 Example


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 RSS subscribe by email Subscribe by Email

11 comments :

Anonymous said...
This comment has been removed by a blog administrator.
ocando said...

Your sample no work in IE9: This web page yes, but yor sample code NO.


ocando said...

Test your code example in a separate file, and you'll notice that it does not work in IE9.

Suresh Dasari said...

@ocando...it will work in IE 9 also that's why we defined different radius for each browser check css class "samplecss"

gunageorge said...

hi but this is not working ie browser.. pls help me

abhilash S.Kumar said...

Hi Suresh the Above code only works in IE9

IE-8 -not working
IE-7 -not working

Naveen Kumar said...

Its not working on IE browser. Can you check and modify.

Anonymous said...

We need to Use PIE.htc or PIE.js in order to get round corners in ie-7 and ie-8 browsers

Naveenkumar said...

how nice

Ravi said...
This comment has been removed by a blog administrator.
suresh said...

Hi Suresh the Above code only works in IE9

IE-8 -not working
IE-7 -not working

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.