How to create rounded corners on your website
With full support for CSS3 being just around the corner, there is no doubt that the task for creating rounded corners is going to become much easier. But, at the moment we definitely do not have enough users using a CSS3 compliant browser so we have to cheat a little when it comes to creating rounded corners on our websites.
Different design call for different solutions so I will outline a few of the techniques I have used in the past to create a nice rounded corner. One downside to this techniques is none of them, except the CSS3 technique, use what I would consider to be semantic markup.
Technique 1 -Three Images
If you are working with a fixed width design, this one can work out quite nicely. First you start with a Rounded corner element like this box.
Next you will want to slice the image into three different images, like so:
You will need save your images using proper naming conventions so that you can easily target them later with your css. I am using rounded-top.png for the top image, rounded.png for the middle image and rounded-btm.png for the bottom.
Now to the markup..
<div class="rounded">
<div class="rounded-top">
<div class="rounded-btm">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
As I said in the beginning not the most semantic markup you will ever see, but it gets the job done. The only thing to remember is all content for this container needs to be housed within the .rounded-btm div, that way when we expand it, the other divs will expand as well. Now we need to use CSS to make this work..
.rounded {
background: url(rounded.png) repeat-y 0 0;
width:580px;
}
.rounded-top {
background: url(rounded-top.png) no-repeat 0 0;
}
.rounded-btm {
background: url(rounded-btm.png) no-repeat 0 100%;
padding: 20px;
Again nothing too fancy here, I have only added the width dimension to the outermost container, that way all the children containers are forced to fit. Then we added a little bit of padding on the innermost container to give the text a bit of breathing room. Another thing that I would like to point out is that for this simple example I could have actually used just two images the top and the bottom. I would then have to declare the background color on the outermost container, and in this case I would also have to set the left and right border. Also since I was not too careful when slicing I have a fair amount of white background in my images, this would have to be trimmed away so that the images fit the full width of the outermost container. All in all, I usually find it easier to have three images and the few extra kb is not going to slow down a website.
Technique 2 – More images
Of the image techniques this is the most flexible as we can set the width or height to whatever we like, however it involves a lot more markup. The idea is to take our original image and instead of slicing it in three, we instead slice it into 4 images, each one being a corner.
Once I have sliced these images I like to save them in a sprite, like this:
Now we create some markup.
<div class="second-tech">
<div class="corner tl"></div>
<div class="corner tr"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
Lets go over it, I have created one container called second-tech, inside this container we have four more divs that are all given the class of corner, but they are also given their own unique class. All content needs to be inside of the .second-tech div but outside of the corner divs.
Now we need some CSS to make it look the way we want:
.second-tech {
background: #b0c4de;
padding:20px;
position: relative;
}
.corner {
height:13px;
position:absolute;
width:13px;
}
.tl {
background: url(sprite.png) no-repeat 0 0;
left:0;
top:0;
}
.tr {
background: url(sprite.png) no-repeat -38px 0;
right:0;
top:0;
}
.bl {
background: url(sprite.png) no-repeat 0 -38px;
bottom:0;
left:0;
}
.br {
background: url(sprite.png) no-repeat -38px -38px;
bottom: 0;
right:0;
}
In this technique, we need to make sure that the parent container has a positioning on relative on it, we then position all the children absolutely. As you can see we move them around the box by declaring two values either left or right, bottom or top. To keep the http requests down I chose to create one sprite image and change the background position, rather than create 4 different images, I can do this because the corners will always be a specific height and width.
Use CSS3
If I was building all my websites for myself, this is the only technique I would use. Visitors that were using modern browsers would see the rounded corners, everyone else would be left with good old rectangles. This technique is the most flexible and has 100% semantic markup.
<div class="css3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
That’s it for markup, one lousy div. Everything else is done with the CSS:
.css3 {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}
Look how neat and tidy the future is going to be! You can even target individual corners if you like:
.css3 {
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 0;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius:0;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 0;
}
Summary
This is by no means a complete list, I mean I have only outlined three possibilities. If you would like to suggest a link or another technique please feel free to do so in the comments. If you want to further explore the different techniques out there, take a look at:
No related posts.
