Rounded Corners with CSS and One Image

Today I want to talk about how to create that rounded corner look you see popping up all over the internet.

Why rounded corners ?

Well like most web design fads it’s a more dynamic and appealing way to server your site’s content up to the user.

Are rounded corners necessary?

Absolutely not, but hey back in the beginning of web development neither was a lot of things such as background colors HAHA.

Is this the only way to make rounded corners?

No and I doubt its even the best way, it’s just my technique I like to use. You can find hundreds of other rounded corner tutorials out on the net.

(Note: In time this technique will be obsolete due to CSS3 and the ability to create rounded corners with purely CSS. You can use CSS3 techniques today, but unfortunately a few well used (but not so much liked) browsers do not support CSS3 yet.)

Let’s start off with our blank document.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rounded Corners Tutorial</title>
</head>

<body>
</body>
</html>

Now let’s create our html structure of our content box and its four corners. I’m going to use a combination of a div box and an un-ordered list because its easier to maintain in an actual html document..

Place the following inside your body tags.

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

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

Now let’s create a few CSS classes for our content cell and its four corners. We use classes because the potential of us having multiple boxes with rounded corners is high.

In our documents header tags add the following.

<style type="text/css">
.cell{}

.cell ul{}

.cell li{}
</style>

We now have three classes in our styles (.cell, .cell ul and .cell li). Let’s break down each rule so we can get a good idea of whats going to happen with these classes down the line.

.cell {} is the class for our main div box container that will hold not only our content, but also our four corners.

.cell ul {} is using our first class, to then point to any un-ordered lists we have nested inside “.cell“.

.cell li {} is like the “.cell ul” in the manor that it too uses “.cell” to point to any un-ordered lists we have nested. However, “.cell li” is specifically pointing to all list items within an un-ordered list that resides in our “.cell” div box.

Let’s now start adding styles to our classes by making your CSS look like the following:

.cell{
position:relative;
padding:21px;
background-color:#f8c771;
float:left;
display:inline;
}

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

.cell li{
list-style:none;
}

In our “.cell” class you can see that we have created a background-color, and a padding of 21px. I use a padding of 21px because in this tutorial we are going to create some fat rounded corners that are 20px in radius so we use 21px to give us extra 5px padding from our boxes edges and corners. We also use the odd number 21 instead of 20 because some versions of IE mess up upon to great of a font size change resulting in a 1px border on some corners.

We have a background-color property here that is set to my desired color. You may change this background color to whatever you like.

I have also placed a position:relative; property in our “.cell” class cause we are going to be using a position of absolute for our four corners.

Finlay we have a float:left; and display: inline;. (For IE users that don’t set a desired width this is important because with our floating our “.cell” get messed up in versions of IE5 and IE6. As a good practice always include display of inline when floating an element.)

.cell ul” has set it’s margin / padding set to 0px in order to remove any default browser behavior of spacing. The “.cell li“ has list-style:none;, and it also remove any default browser behavior (list item bullet points).

Next we are going to create classes for our four corners by adding the following to our CSS.

.tl{}

.tr{}

.bl{}

.br{}

These classes stand for top left(.tl), top right(.tr), bottom left(.bl) and bottom right(.br). Because we are going to be positioning each of these as relatively absolute to our “.cell” div box, we need to specify their positions.

Add the following property’s to each of these classes.

.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;}

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

Ok here you can see we have a top and either left or right property for the top corners. For the bottom corners we use a bottom and either a left or right property and again, all these are doing is positioning our corners inside our content box.

Now you might have noticed, we are also using a background property for each of these corners. The background property is calling an image I created in Photoshop that we are positioning to the inside of our four corners.

Because this is not a Photoshop tutorial, I will just show you the image we are using so you may get a clear idea as to why I have positioned the image.

Here is the image that makes our rounded corners.

corners

HEY THAT’S NOT A CORNER!

Indeed, it’s not, but to save time and memory it’s wise to make a single image that is a circle and is twice, let me repeat that, “TWICE” the size of our desired corners.

In this tutorial our corner radius is 20px, we therefore make our circle image 40px wide and 40px tall.

Ok remember how I told you we are going to position our corners to be absolute within our container div box? We need to make one more CSS class that will make each of our corners position absolute.

Add the following rule and property’s to your CSS.

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

With this class we are setting each of our corners to have both a width and height of 20px, position to be absolute and have a z-index of 1. Z-index is a way to tell the browser to make our corners priority number one when it comes to a rendering hierarchy. So with z-index:1; our rendering hierarchy will go corners->content->container box.

Let’s take a look at our results.

fig1

Hmm looks like a long tube of some sorts. Let’s add some dummy content to it in order to see if our box is stretchy and won’t break if we increase our browsers font size.

Make your HTML look like the following.

<div class="cell">
    <ul>
        <li class="tl corner"></li>
        <li class="tr corner"></li>
        <li>
Nihil eligendi intellegebat et sit, et sit assum aperiam utroque. Augue debitis in sit,
duo an eros saepe saepe ">timeam. Reque erant efficiendi ad vix, nobis saepe mucius no mel. Cu pro diam
probo ne ">convenire, duo ad senserit scripserit philosophia. Admodum commune convenire vix ne, sed
eu tota omnis inani. Odio impetus laoreet usu an, cu tamquam lucilius urbanitas duo, an postea
platonem dissentiet mel.

Qui porro aliquip placerat ei, te eum dicam habemus senserit. Usu an esse saepe efficiantur,
sea at debitis platonem adversarium, in salutatus consequat vix. Altera blandit suscipiantur
ius eu, autem iriure scripserit vix ut, eam ex apeirian postulant. Vis atqui aperiri fuisset ad,
eam te adolescens interesset. Erat iusto propriae pri id, ea sed veri scripta imperdiet.

In quo dicit invidunt intellegam, his vidisse moderatius instructior at, mel dolores consetetur
complectitur eu. Enim utinam voluptatum ad est, no eam iusto integre suscipiantur. Sea cu noster
expetendis suscipiantur, ea mea kasd vidisse patrioque. Tantas feugait suscipit per ad, an quas
soluta latine mei. Iudico discere comprehensam an vix, magna scripserit cu usu, quo eu lucilius
patrioque. Offendit lobortis mea cu, no has essent dolorum molestiae.

His autem verear dolores ex, dolor veniam temporibus eu eos, in amet kasd magna qui.
Mazim equidem adipisci mel an, ea quidam omnium deseruisse est, usu debet facilis abhorreant ex.
Est ea ubique qualisque definitionem, ex ignota commune molestie his, ei est civibus accusam.
An usu dicta praesent partiendo, usu autem persius no, adolescens efficiendi appellantur qui ex.
com cu unum putent ornatus, vel dico nusquam et.
		</li>
        <li class="bl corner"></li>
        <li class="br corner"></li>
    </ul>
</div>

All content needs to go in between our top corners and our bottom corners and be wrapped in its own list item tag (<li> </li>) in order for it to work correctly with Microsoft IE.

Here is our final results (Click image to see demo).

fig2

Awesome couldn’t ask for more!!

About Author:

I work as a full time frontend web developer at ISITE Design located in Portland Oregon. I like to teach, share and dabble deep into the digital dark arts of web and game development.

Follow Me:
TwitterFacebookGoogle Plus

48 Responses to “Rounded Corners with CSS and One Image”

  1. gavi says:

    Am facing issue in rounded corner totally i used three image top, bottom and center while am placing the center image its coming out the div towards left pls help me.

  2. Mervo says:

    Great trick & it works great.

  3. computer tutorials says:

    Great paintings! This is the kind of information that are supposed to be shared around the web. Disgrace on Google for not positioning this publish upper! Come on over and talk over with my site . Thank you =)

  4. Brian says:

    This works very well; thank you for the tip.

    I have one issue: When I try to create my own circle image using MS Paint, it fails. The corners never seem to line-up correctly with the boxes I am using in my web page, even though I’ve tried to match the size of the circle image you are using.

    So I tried another approach. I downloaded your image via my browser. But, MS Paint does not seem to allow the background color to be changed. It confines the color change to a rectangle inside the circle.

    Any ideas? I would like to be able to resuse your circle image, but just change the color of the circle so I can reuse it in a number of places.

    Thanks!

    • @Brian, unfortunately I’m unable to fully diagnose what your original issues with your image and or set-up was, unless you set-up a http://jsfiddle.net for me.
      As for my version, I’m not supprised by the differences in the image when opened in MS Paint. With the limited ability to read / write modern image compression types in MS Paint, I must strongly advise you to use almost any other image manipulating software other than MS Paint.

  5. [...] made me able to use the great Rounded Corners solution from Devin R Olsen, with a few minor tweaks. The difference in Devin’s example and my final solution, is that [...]

  6. Angelo Klevene says:

    Great site! I come here all of the time! Keep up the great work!

  7. Roxy Nghe says:

    Well what can I say? great post and I completely agree with you on all points and I am thinking about adding a link on my blog to your blog post because its that good.

  8. Jacquelynn Abraham-Saslaw says:

    BTW — This technique is SO AWESOME. As others have commented, light & easy; and may I add, a wonderful ‘down & dirty’ as well. Until CSS3 arrives for real, this is going to be my go-to quick fix. Thanks again!

  9. Abhilash says:

    That was great..!
    Thank U..!

  10. cna classes says:

    Wow this is a great resource.. I’m enjoying it.. good article

  11. Annie says:

    For me the bottom is showing up like this:
    http://i47.tinypic.com/2rqc0m1.jpg
    Is there a way I can fix it? Thank you.

  12. SEO Web Developer UK says:

    Is it a good practise to have images in this level ?

  13. Thought I would spend time to read and comment on most of your articles today as the weather is so shocking :(

  14. Is this the full article? I think somethings missing…

  15. Yatish says:

    This works ossom!!! my only question is,can we add the shadow with the same technic?

  16. Billyboy says:

    Hi, great tutorial, very helpful. I want to make my main preset CSS \”body\” have rounded corners, not a bax inside the already formed \”body\” area. I know I am probably being very dense, but how would I go about it?

  17. thefirstpic.com says:

    I like this method. It’s light and easy to remember. The only problem that I found is the fact that if the background of the page is any color other that the background color of the corner image you’ll see the whole square image. Other than that I really like this simple but very useful method. I shall use this in the future. Thanks

  18. Kirk says:

    Michael is spot on, a small bottom and right border is shown in IE6, this should show up in IETester also when viewing your demo page.

  19. Michael says:

    Hey lad! I noticed that the problem with the 1px in IE6 5.5 appears to be a generl problem: Your demo site in IE6: http://img.xrmb2.net/images/299372.jpeg Another demo (my page): http://img.xrmb2.net/images/844556.jpeg It’s just a small glitch, but it would be great if this problem could be solved� Greetings!

  20. Michael says:

    I used your method on my website with several divs, and it works perfectly fine! Thanks a lot!

  21. arne says:

    thanks dude, works great

  22. rudy says:

    cool!!! wonderful

  23. Devin R. Olsen says:

    douglas, I have no idea what you are trying to do, but to be honest there is no \”=\” syntax in CSS. Therefor I would have to assume that you are trying to work with tables because of the use of valign. valign is only supported in tables not dynamic divider blocks such as \”div\”.
    With little bit more of a hint on what you are trying to accomplish here I might be able to help you further.

  24. douglas says:

    which one of the following entries would position a cell s contents either text or imagery in the top right corner of the cell a.alig=right valign=center b.align=right valign=top c.valign=top align=justify d.valgn=right align=top

  25. Lisa says:

    Very cool! Worked perfectly. I appreciate your time and effort in putting together this tutorial. Very easy to follow along. Thank you!

  26. Action says:

    I sent my email add already. thank you so much for your help…

  27. Devin R. Olsen says:

    No the OS shouldn’t matter as far as I know, can you please describe the error or send me your email so I may take a look at your code? This is the second time someone has told me that it wont work in IE6, but my tests have show it has so I would like to narrow the issue down. Unfortunately the last person who said it wouldn’t work in IE never replayed back so it got me no where.

  28. Action says:

    Not working on IE 6. the OS im using is windows 2000. does the os really matters? :(

  29. Devin R. Olsen says:

    Something else I forgot to add is that with this method, you are not restricted to a width or height by your images like quite a few other methods out there on the net.

  30. nathan says:

    awesome technique, totally elegant compared to sliding doors and all that. great do…entation too, feels like a weight’s been lifted, nice insight!

  31. Devin R. Olsen says:

    Hi thorne, yes indeed you can. Simply apply this to our styles to reset an lists that reside in our .cell.

    .cell li ul {margin:10px; padding:10px;}
    .cell li li { display:list-item; list-style:disc;}

  32. thorne says:

    How can I add another list of items inside this box? great tutorial

  33. aligner says:

    Thanx a lot, your tutorial just solves the design problem I’ve been trying to figure out for a long time. Useful, not complicated with countless

    tags. I’m gonna apply this hint on my site right away. Regards!
  34. webtuto says:

    thanks , it was useful

  35. AndrewNS says:

    Thanks, something i was looking for!

  36. shafraz says:

    wow.thanks a lot

  37. Stan Omoregie says:

    This is absolutely awesome technique! I never liked the technique with four slice corners for getting this type of result. I’m going to try this right away… Thanx!

  38. vineeth says:

    Thanks a lot

  39. Tharros says:

    This is a very clever way of doing round corners. Thank you! I have found another way using the :before and :after pseudo classes but that is another story :p

  40. Devin R. Olsen says:

    @Graphix – Indeed you are right and as I stated in the start of the tutorial once CSS3 is the standard for all commonly used browser this method will be obsolete. But until then we must support all browsers even CSS1 browsers and this technique douse just

  41. ravikumar says:

    it’s a nice and superb technique

  42. Graphix says:

    you did not need Images for Rounded Corners� there is a code for Firefox and some other browsers, but they did not Work in InternetExplorer (6.0 for sure) just add the following line to a div id container in your .css file. -moz-border-radius-bottomleft:10px; to choose another Corner just change bottom against top and the side you want. BUT REMEMBER… this code will only work in Firefox 3 and above.

  43. Devin R. Olsen says:

    @Rajneesh, in my testing with IETester that allows you to test with versions IE5.5, IE6, IE7 and IE8 I find no problems. What might be the problem you experiencing on your end? Also what OS are you using?

  44. Rajneesh says:

    Tuorial is good, But not working properly in IE6.

  45. Nicholas says:

    enjoyed a lot. super. 5 star(*****).

  46. samson says:

    very Nice tutorial! I used to slice image to make 4 corners then put them as bg in each corner cell . This is so easy thank

  47. Cherisa says:

    Awesome tutorial!!

  48. lessThan says:

    Great Read!! I want to find an alternative solution to the whole rounded corners thing. One that wont use images and can have like gradient background and border support. Might you know of any?

Leave a Reply