Round Corner Box in CSS – Interesting Way To Make It

Stunningmesh - Tutorials, Articles, Wallpapers
Round Corner Box in CSS – Interesting Way To Make It

Many people asked me how we can make Round Corner Box in CSS, so this tutorial will help them, how we can make these Boxes.

1. Let us first make some images which will be used as Round Corner. I’ve made a rounded rectangle in Photoshop and then I’ve cut only the corners in 4 different images (of size 15x15px in JPG format). Like:

CSS Tricks (box made in Photoshop)

Round Corner Box It will be used for Top Left Corner) (file name is top-left.jpg)

Round Corner Box It will be used for Top Right Corner) (file name is top-right.jpg)

Round Corner Box It will be used for Bottom Left Corner) (file name is bottom-left.jpg)

Round Corner Box It will be used for Bottom Right Corner) (file name is bottom-right.jpg)

2. Now you need Two files, one for HTML and other for CSS. You can use any HTML editor like Dreamweaver, Frontpage etc., so write the following codes in HTML file:

—————————————————————–

<div class="smOuterBox">
   <div class="TopRound">
     <img src="top-left.jpg" width="15" height="15" alt=""/>
   </div>

 <p>Stunning Mesh - A Place where you can find Tutorials, 
Free Stuff (Icons, Fonts, Images, Gradients, Styles, 
Patterns etc.), Free Computer Courses, Wallpapers, 
& a lot more...</p>

   <divclass="BottomRound">
     <img src="bottom-left.jpg" width="15" height="15" alt=""/>
   </div>
</div>

—————————————————————–

3. Now take a new CSS file and write the following code in CSS File:

.smOuterBox {
 width: 200px;
 background-color: #94d7f7;
 color: #fff;
}

.smOuterBox p {
 margin: 0 10px;
}

.TopRound {
 background-image: url(top-right.jpg);
 background-repeat: no-repeat;
 background-position: right top;
}

.BottomRound {
 background-image: url(bottom-right.jpg);
 background-repeat: no-repeat;
 background-position: right top;
}

img.corner {
 width: 15px;
 height: 15px;
 border: none;
 display: block;
}

3. Save this file and write any name like stunningmesh.css.

4. You have to attach this CSS file with your HTML, for this purpose go to HTML file’s code and write this code just under the <title></title> tag: <link href=”stunningmesh.css” rel=”stylesheet” type=”text/css” />

5. Now save both files and view HTML file in any browser, you will find the following look of Round Corner Box using CSS:

Round Corner Box