9 {{ upvoteCount | shortNum }}
9 {{ upvoteCount | shortNum }}

Cross Browser Round Corners

by ronc0011
7 replies
  • WEB DESIGN
    • |
I'm putting this up because a) I see the question posted all the time and b) I just got up and I'm trying to get the brain up and running. Basically mental calisthenics.

This is the best method I've found for creating rounded corner boxes for my page layout. It doesn't care what browser you are using and requires no javascript. It is 100% CSS.

First of all you will need 4 images for your four corners. Because your box needs to be able to resize with the browser window the images need to be more than half the width of the max size your box will ever be. i.e. if the max size of your box will be 800 px. then the images need to be about 420 px. The images I've used here are 400 px.

Here are the images I've used on some of my pages...










Note that the images are 8px. high and are a background color with a 1 px border that is used to make the round corner. Remember the 8px height because there is a tweak later that uses that value.

Next step is to create the CSS that forms our box. Basically there are 7 elements that make up our box. There is a parent container for the top and bottom and two nested containers / divs for each that hold our images as background-images. The parent containers have some margins set here but they are adjustable depending on your use. Also remember to use the correct path for your background image. Mine are in a folder named "corners".

Code:
 
.top
{
width:750px;
height:8px;
margin-top:30px;
margin-left:auto;
margin-right:auto;
}
 
.topL
{
background-image:url("corners/topL.gif");
background-position:left top;
background-repeat:no-repeat;
height:8px;
min-height:8px;
line-height:2px;
 
}
 
.topR
{
background-image:url("corners/topR.gif");
background-position:right top;
background-repeat:no-repeat;
height:8px;
min-height:8px; 
margin-top:-8px;
line-height:2px;
} 
 
.bottom
{
width:750px;
height:8px;
margin-bottom:25px;
margin-left:auto;
margin-right:auto;
} 
 
.bottomL
{
background-image:url("corners/bottomL.gif");
background-position:left bottom;
background-repeat:no-repeat;
height:8px;
min-height:8px;
line-height:2px;
 
}
 
.bottomR
{
background-image:url("corners/bottomR.gif");
background-position:right bottom;
background-repeat:no-repeat;
height:8px;
min-height:8px; 
margin-top:-8px;
line-height:2px;
} 
 
.container
{
width:725px;
max-width:725px;
margin-left:auto;
margin-right:auto;
padding:12px 12px 15px 12px; 
background-color:#fcfcfc;
border-left:solid 1px #666666;
border-right:solid 1px #666666;
text-align:center;
}

Note the two containers "topL" and "topR"; a margin-top value of "-8" is set for the "topR" div. This will cause the "topR" div to sit on top of the "topL" div. Also note the "line-height" value of 2px. This seemingly useless attribute is required to make this behave correctly.

OK, the bottom is just the same as the top except you use the "bottomL" and "bottomR" images.

The final step is the actual content container. The content container's background should match the background color of the images. And the content container should have a left and right border.


Finally when you put this together on the page it will look something like this.

Code:
 
<divclass="top">
 <divclass="topL"></div>
 <divclass="topR"></div>
</div>
 
 
           <divclass="container">
                  All your content goes here
           </div>
 
 
<divclass="bottom">
 <divclass="bottomL"></div>
 <divclass="bottomR"></div>
</div>
#browser #corners #cross #round
  • Profile picture of the author robertwhitis
    This is a good, sound way of achieving this effect, and should help many people.

    I'd just like to say that this is also doable with tables, as well as divs, with a few changes to CSS.

    A similar method I use with gradients, is to create a vertical gradient image the same height as whatever content area it will be the background of. I then crop the gradient image to a small slice, with the same height, but only a few pixels wide.

    Then using background-repeat: repeat-x, the result is a gradient background that will always fill the space correctly, regardless of width.

    This could also be done with a horizontal gradient, as your slice would be the width of whatever content area it will be the background of, with a height of only a few pixels. You would then use background-repeat: repeat-y instead of repeat-x.

    I typically use vertical gradients for headers, footers, or topic headings, and horizontal gradients for content areas.
    {{ DiscussionBoard.errors[3737311].message }}
  • Profile picture of the author polyvisual
    Can't wait for css3 to be fully supported in every browser! My life will be so much simpler!
    {{ DiscussionBoard.errors[3739441].message }}
    • Profile picture of the author ronc0011
      You can also change the top images and tweak the values so that the top image is like 50px high and a solid color like blue or green or whatever. It then serves as a header where you can put headline text.

      All in all I like this method because it is very versatile and has no browser issues. Once you build your CSS it's reusable. Just tweak it according to your particular needs at the time.

      Anyway, as I mentioned, I put this up here because I see the question come up fairly often and this is the best way I've ever found to create round corners. Also round corners do help with a pages appearance. I almost always use a white body background color because I just think it makes for a cleaner looking design. But I will often use these containers (divs) for the actual content and to break up the flow of the page. So I typically use a very slightly gray background color for these containers for instance #fcfcfc. I will also typically tone down the black of the text to a little bit grayer shade like #252525.
      {{ DiscussionBoard.errors[3740355].message }}
      • Profile picture of the author jamesg3
        If you use png's the images and corners will be sharper and much more enjoyable to look at. If you are with a decent host provider, the added file size will not make a difference at all. Also you can call them at the beginning of the html file using divs so that they load first giving the appearance of a speedy site. Hope this helps.
        Signature
        Serious Wordpress sites, html/css sites and flash sites Cheap. I provide killer SEO, easy to use e-commerce solutions and payment gateways. Check me out at Serious Website Design.
        Need Hosting with serious speed and power? 3.99 a month. Take a look here. Serious Website Hosting.
        {{ DiscussionBoard.errors[3741163].message }}
        • Profile picture of the author ronc0011
          Originally Posted by jamesg3 View Post

          If you use png's the images and corners will be sharper and much more enjoyable to look at. If you are with a decent host provider, the added file size will not make a difference at all. Also you can call them at the beginning of the html file using divs so that they load first giving the appearance of a speedy site. Hope this helps.

          Actually the images are 1kb in size so there really shouldn't be an issue with loading time related to file size. I am curious about calling the images at the beginning of the HTML file. What exactly do you mean by that? How would you do that?
          {{ DiscussionBoard.errors[3741497].message }}
          • Profile picture of the author jamesg3
            Well, browsers read your code from top to bottom. If I have a script or a fancy plugin that uses a lot of resources or takes a lot of time to load I normally put that code at the bottom of the document. It causes the browser to load that last and provides for a quicker means to get the rest of the content and everything else loaded up first and then the resources are free to load up that heavy script or graphic easier and faster. You will find examples of this in alot of wordpress themes or you may have noticed that many developers have begun to add there google code at the bottom of an html doc or maybe they added that heavy image slider to the bottom of the code. Then the browser just has a chance to load everything else first before it has to load that heavy graphic or script. It helps the site appear faster and the graphics load much quicker. I hope this makes sense to you. I can pull the doc from the w3consortium if you need further explanation. Also, if you would like to keep up with the new rules and regs I would suggest stopping by there anyways, they have a lot of good info on the correct ways to display your content now due to the new html 5 changes and all. They explain the loading and using your scripts and heavy graphics in the upper or lower part of your code and how the browser reads it.
            Signature
            Serious Wordpress sites, html/css sites and flash sites Cheap. I provide killer SEO, easy to use e-commerce solutions and payment gateways. Check me out at Serious Website Design.
            Need Hosting with serious speed and power? 3.99 a month. Take a look here. Serious Website Hosting.
            {{ DiscussionBoard.errors[3741995].message }}
  • Profile picture of the author charles123krik
    I have one coding in CSS through this you can run an apploication on every platform like IE,Opera,Safari,Firefox and more.
    .rounded-corner
    {
    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:9px;
    }
    {{ DiscussionBoard.errors[3968305].message }}

Trending Topics