Round Corner Box in CSS

Categories CSS, TutorialsPosted on

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 made in Photoshop)

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

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

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

 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=""/>

 <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>

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


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:

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.