How to create rounded div in CSS by using a single image

If you are into web page development, you are likely to have come across many tutorials and tips explaining how to create rectangles with rounded corners. Some of these tips, tutorials and techniques require you to use multiple images, one for each corner but the fact is you can also create rounded corners with just a single circle if you know how to do it.

Imagine taking a circle and dividing it by drawing a horizontal and a vertical diameter intersecting at centre (a plus symbol). Each part can now be placed on the four corners of the div. A similar technique can be followed programatically. Read on.

.mydiv
{position:relative; text-align:justify;margin-top:10px;margin-left:10px; float:left; display:inline;width:400px; padding:21px; background-color:#f8c771;}

.mydiv ul
{margin:0px; padding:0px;}

.mydiv li
{list-style:none;}

.corner
{width:20px; height:20px; position:absolute; margin:0px; z-index:1px}

.tl
{top:0px; left:0px; background:url(images/corners.jpg) top left no-repeat;}

.tr
{top:0px; right:0px; background:url(images/corners.jpg) top right no-repeat;}

.bl
{bottom:0px; left:0px; background:url(images/corners.jpg) bottom left no-repeat; vertical-align:bottom;}

.br
{bottom:0px; right:0px; background:url(images/corners.jpg) bottom right no-repeat;}

I have created the class named as mydiv which will be your main div, which you want to make a rounded div.

I have derived ul and li for the div mydiv

corner is the class which will hold the 4 part of the circle in 4 corner of the rectangular div. the z index is 1 as we need the part of circle to be placed over the div.

class tl,tr,bl,br are the classes we have to keep in top right, top left, bottom left and bottom right.

url(images/corners.jpg)is a circular image
[ you can get this image below]

Now lets look into the html part

<div class="mydiv">
       <ul>
           <li class="tl corner"></li>
           <li class="tr corner"></li>
           <li>

my example for div rounder without multiple images just us one circle image and make a different types of rounded divs.my example for div rounder without multiple images just us one circle image and make a different types of rounded divs.my example for div rounder without multiple images just us one circle image and make a different types of rounded divs.

</li>
          <li class="bl corner"></li>
          <li class="br corner"></li>
      </ul>
  </div>

This will create the div in rounded shape, if you do not need the rounded shape in any corner just put the li tag with out the class name ………. for instance, suppose i need a box rounded in bottom right only-

<div class="mydiv">
        <ul>
            <li></li>
            <li></li>
            <li>

 

            </li>
            <li></li>
            <li class="br corner"></li>
        </ul>
    </div>

You can find the complete html code below, just copy and past it in notepad and save it as a html page and see the html page in browser. Before that make sure you have and put the image in images folder.

rounder

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mydiv Rounded Corners Demo using one image</title>
<style type="text/css">
.mydiv
{position:relative; text-align:justify;margin-top:10px;margin-left:10px; float:left; display:inline;width:400px; padding:21px; background-color:#15A1C5;}
.mydiv ul
{margin:0px; padding:0px;}
.mydiv li
{list-style:none;}
.corner
{width:20px; height:20px; position:absolute; margin:0px; z-index:1px}
.tl
{top:0px; left:0px; background:url(images/corners.jpg) top left no-repeat;}
.tr
{top:0px; right:0px; background:url(images/corners.jpg) top right no-repeat;}
.bl
{bottom:0px; left:0px; background:url(images/corners.jpg) bottom left no-repeat; vertical-align:bottom;}
.br
{bottom:0px; right:0px; background:url(images/corners.jpg) bottom right no-repeat;}
</style>
</head>
    <body>
        <div class="mydiv">
        <ul>
            <li class="tl corner"></li>
            <li class="tr corner"></li>
            <li>

</li>
           <li class="bl corner"></li>
           <li class="br corner"></li>
       </ul>
   </div>
  
   <div class="mydiv">
       <ul>

           <li ></li>
           <li class="tr corner"></li>
           <li>

</li>
         <li class="bl corner"></li>
         <li class="br corner"></li>
     </ul>
 </div>

 <div class="mydiv" style="margin-top:20px; ">
     <ul>
         <li class="tl corner"></li>
         <li ></li>
         <li>

</li>
           <li ></li>
           <li class="br corner"></li>
       </ul>
   </div>
  
   <div class="mydiv" style="margin-top:20px; ">
       <ul>
           <li></li>
           <li ></li>
           <li>

my example for div rounder without multiple images just us one circle image and makenm a different types of rounded divs.my example for div rounder without multiple images just us one circle image and make a different types of rounded divs.my example for div rounder without multiple images just us one circle image and make a different types of rounded divs.

 </li>
            <li ></li>
            <li class="br corner"></li>
        </ul>
    </div>
<div class="mydiv" style="margin-top:20px; ">
        <ul>
            <li></li>
            <li class="tr corner"></li>
            <li>

My example for div rounder without multiple images just us one circle image and make a different types of rounded divs.my example for div rounder without multiple images just us one circle image and make a different types of rounded divs.my example for div rounder without multiple images just us one circle image and make a different types of rounded divs.

  </li>
            <li class="bl corner"></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

Abinash Grahacharya , Sr. Developer, Mindfire Solutions.

Related Tags: CSS, HTML

Author : Abinash Grahacharya

How to create rounded div in CSS by using a single image

Leave a Reply

Subscribe With Us