Rounded corner in CSS


In CSS , If u  want to create rounded Corner for div or any other element

We will uses property like border-width; . But this will not Supported by

Internet Explorer . When we are writing CSS code , It should be supported to all Browser.

So Make round corner div by alternate way .

Cut circle  from that same div  which we are going to keep in every corners of that

div. Hence it will seen as rounded corner div.

This is main div . Now we are making it to be rounded corner.


#main_div {
 background:red;
 width:100px;
 height:100px;
 margin:20px;
 position:relative;
 }

This will create box div

Take screenshot of this div and using GIMP or Photoshop , cut it as round as –

Now keep this image in all corner and change backround position of image .

For this you should write some CSS code .


<html>
 <head>
 <style type = "text/css">
 #main_div {
background:red;
width:100px;
height:100px;
margin:20px;
position:relative;
 }
 div.corners{
width:10px;
height:10px;
background:url(image.png)
 }
 div#top-left{
position:absolute;
top:0px;
left:0px;
background-position:0px 0px;
 }
 div#top-right{
position:absolute;
top:0px;
right:0px;
background-position:-10px 0px;
 }
 div#bottom-left{
position:absolute;
bottom:0px;
left:0px;
background-position:0px -10px;
 }
 div#bottom-right{
position:absolute;
bottom:0px;
right:0px;
background-position:-10px -10px;
 }
 </style>
 </head>
 <body>
 <div id = "main_div">
 <div class = "corners" id = "top-left"></div>
 <div class = "corners" id = "top-right"></div>
 <div class = "corners" id = "bottom-right"></div>
 <div class = "corners" id = "bottom-left"></div>
 </div>
 </body>
</html>

Note: Background layer  of image.png and background color of body (not main-div) should

be same .

This will yield you rounded corner in all Browser .

Advertisements

About sathia

Web developer at cloudmint
This entry was posted in Uncategorized. Bookmark the permalink.

One Response to Rounded corner in CSS

  1. Isa Kelly says:

    Excellent blog. I was checking constantly this blog and I am impressed! Extremely useful information specifically the last part. I care for such information much. I was seeking this certain information for a very long time. Thank you and best of luck.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s