Affilorama Premium
AffiloBlueprint
AffiloJetpack
My ProductsHow to Make a Round-Cornered Box
Round cornered boxes are hugely popular amongst web designers. They're also surprisingly tricky little fellows to create. In this lesson we're going to take a look at How to make a round-cornered box that won't bloat your page with excessive amounts of code.
For this lesson we assume that you know how to write a bit of HTML and how to add CSS to your page.
A little prep
Before you start you're going to need four small images for your corners. We created ours in Photoshop by creating a rounded rectangle (that looks roughly like we want our final round-cornered box to look like) and then cropping it down to one corner, then save as 'topleft.gif'.
We then get the other corners by rotating it 90 degrees at a time and saving it with an appropriate name:
- topleft.gif
- topright.gif
- bottomright.gif
- bottomleft.gif
Note that for this to work, the images need to be perfectly square! Check their pixel width and height to make sure. You're going to need to know this information soon anyway.
Template Page
Now create a basic HTML page with the following code:
<!doctype html> <html> <head>
<meta charset="UTF-8"/> <title>Go go round-cornered box!</title> </head> <body> <div class="round"> </div> </body> </html>
You'll see that there's nothing in it at the moment except for a very exciting title and an empty <div> box that has been given the class of “round”. This is going to be the round-cornered box. For simplicity's sake we saved this file in the same folder as the round cornered images.
Now for some CSS. For the sake of this lesson, we recommend using an "embedded stylesheet", which is a stylesheet that goes in the <head> section of the page. If you're using your round-cornered box on more than one page, you should take this out and put it into your external stylesheet.
In the <head> section write the following:
<style type="text/css">
div.round {
width: 400px;
height: 200px;
background-color: #86b83f;
}
</style>
That says “I want my “round” div box to be 400 pixels wide, 200 pixels high, and to have a background color of #86b83f (which is the 'hex value' for the specific shade of green).
If you preview this in your browser, you should see the following:
Now we're going to add a bit more CSS to get the top-left corner:
div.round {
width: 400px;
height: 200px;
background-color: #86b83f;
background-image: url(topleft.gif);
background-position: top left;
background-repeat: no-repeat;
}
These three lines specify the background image for the whole box – namely the top left round corner. It also says “position this in the top left corner of the whole box, and don't repeat it like a wallpaper, just show it once.”
You can also specify all these background properties in one fell swoop to cut down on code and save yourself getting RSI from typing “background” too often. The shorthand looks like this:
background: #86b83f url(topleft.gif) left top no-repeat;
The box now looks like this:
Notice the round corner in the top left? Unfortunately you can't have multiple background images on a box, so you can only do that trick once. To get the other three corners we have to be a bit sneaky and put some empty elements into my box. Each of those empty elements can have a round corner for a background image, and then we can position one of them in each corner of our box to complete the rounding.
Inside your round box <div> tags add the following:
<span class="topright"></span>
<span class="bottomright"></span>
<span class="bottomleft"></span>
These will do nothing until we edit the CSS and add a few more instructions:
.round span.topright, .round span.bottomright, .round span.bottomleft {
width:9px;
height: 9px;
display: block;
}
This is a bit more shorthand which mentions all three of these <span> tags at once, since the same rule applies to all three of them. These rules specify we want them all to be 9 pixels high and 9 pixels wide (that's the size of the round corner images, as we recommended you find out earlier), and they're a specific type of element called "block" (so that the widths and heights are actually applied).
The individual rules then follow below the grouped rule, and look like this:
.round span.topright { position: absolute; top:0; right:0; background:#86b83f url(topright.gif) right top no-repeat; } .round span.bottomright { position: absolute; bottom:0; right:0; background:#86b83f url(bottomright.gif) right bottom no-repeat; } .round span.bottomleft { position: absolute; bottom:0; left:0; background:#86b83f url(bottomleft.gif) left bottom no-repeat; }
The background information should look pretty familiar, since it's the same thing we did with the first image. Note that we're using the shorthand though, so everything is specified in one big line. The key difference between these spans and the first corner is that they've been given positioning.
Position: absolute; means that this element appears at definite coordinates inside the parent box. The parent box in this case is the “round” div box. For each corner, we say that we want it to be positioned 0 pixels from the bottom, right, top or left. For instance, our bottom right corner (span.bottomright) is positioned 0 pixels from the bottom (in other words, right at the bottom) and 0 pixels from the right (in other words, hard up against the right) of the green parent box.
You need to change these values in each of the spans, and you should also change the background position for each one as well, although if you've done everything right it shouldn't make a difference.
The last thing we need to do is go back to our div.round CSS and add one more line of code:
div.round {
width: 400px;
height: 200px;
background-color: #86b83f;
position: relative;
}
This is to say that the little corners are positioned inside this box. If you don't add this line in, you'll find your little corners being flung to the far edges of your browser window.
That's it! The green box looks like this now:
A beautiful, rounded box.
Now you can go ahead and put some text inside it!
<div class="round">
<span class="topright"></span>
<span class="bottomright"></span>
<span class="bottomleft"></span>
<p>
It is a long established fact that a reader will be distracted by the
readable content of a page when looking at its layout. The point of
using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using 'Content here, content here', making
it look like readable English.
</p>
</div>
A little breathing space
The text is now inside the green box, but it could do with a little breathing space - it's rammed right up against the edges, and some of it is poking out of the edge of the corner, which really spoils the look.
Fortunately, adding that breathing space is really easy:
div.round {
width: 400px;
height: 200px;
background-color: #86b83f;
position: relative;
padding: 15px;
}
But there's a trick! There's a slightly unintuitive rule that says that all padding is added on top of the specified width of a box. So because we've said the box is 400 pixels wide and 200 pixels tall, if I put another 15 pixels of breathing space around the whole box, it would be 430 pixels wide and 230 pixels high.
400 + 15 + 15
200 + 15 + 15
If you really want to keep your specified dimensions, you need to change the width and height accordingly:
div.round {
width: 370px;
height: 170px;
background-color: #86b83f;
position: relative;
padding: 15px;
}
One last point: at the start we specified a height for the round div box because it didn't have any text in it and we wanted to see what it looked like. In reality, you don't often need to specify a height for boxes like this. If you put content inside it, the box will automatically resize to fit the content perfectly. If you do specify a height, and your content is too big, strange things might happen, like this:
So it's often best to leave that one out.
Lesson Summary
In this lesson we took a look at creating a round cornered box; we took you through:
- Drawing the corners
- Setting up the box in CSS
- Creating the 'spans' for the corners
- Styling the spans
- Inserting the text