Articles CSS Tips & Tricks Tutorials

Round Corner Box in CSS

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

1. Let us first make some images which will be used as Round Corners. 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:

box (box made in Photoshop)

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

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

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

bottom-right 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 goto 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:

tut1-css-thumbnail-

About the author

Wijdan Rohail

A professional Web/Graphic Designer, working as Freelancer since 2000. Designing is my passion, blogging is my hobby.

Add Comment

Click here to post a comment

Topics