Introduction
Everybody loves rounded corners. A plethora of articles have been written about how to do it, but this is going to be different. This article is going to show you how to make rounded corners without images. That’s right. Without images.
Why would we do such a thing? Here are a few advantages:
- Speed: No images to download, therefore the page is quicker loading and less bandwidth is used.
- Time: Does anyone like the tedious work to make rounded corners, splice them, upload them, etc.? I know I don’t. This saves time and frustration.
- Scalability: One refined, this would allow for easy scaling along with the font size, which image corners do not (normally) do.
- Future: This is the future of rounded corners–well, I think so anyway. Images should only be used when necessary, and if we can eliminate images and still make rounded corners with a decent amount of control, the world is one step closer to being a better place.
- Coolness: Nobody is doing this yet, and it is way cool. Your boss will dig it and your mom will be impressed.
Okay, well maybe not the coolness one. But the rest are pretty good reasons.
Theory
The way this works is really quite simple, but it does take thinking outside of the box (no box model puns here, please). To do this, we use a 20 x 20 square (in pixels) with the background of the page. Secondly, we use a bullet the color of the box. For this example, we are going to use a white background (#FFF) and a grey box (#E6E6E6). I know, those choices were extremely colorful of me.
Let’s Try This Thing
As usual, we will start out with the HTML first. What does it take to code this, you might ask? Well, let me show you. Here is the HTML we will use:
(Note: I am using longer class names to facilitate learning, in a real world environment these could—and probably should—be shortened. Also, sorry about no spaces, my weblog software tried to put p tags there when there are spaces, but look at the example for a little more readable code.)
<div class="rounded-box">
<!-- Corners -->
<div class="top-left-corner">
<div class="top-left-inside">
•
</div>
</div>
<div class="bottom-left-corner">
<div class="bottom-left-inside">
•
</div>
</div>
<div class="top-right-corner">
<div class="top-right-inside">
•
</div>
</div>
<div class="bottom-right-corner">
<div class="bottom-right-inside">
•
</div>
</div>
<!-- Content -->
<div class="box-contents">
Contents go here, but it must be at least
two lines to look any good.
</div> <!-- end div.box-contents -->
</div> <!-- end div.rounded-box -->
Now for the CSS. We are going to start out using pixels, because this needs to be pretty darn precise to work correctly. Ideally it will be in ems eventually.
div.rounded-box {
width: 9em;
background-color: #E6E6E6;
margin: 3px;
}
div.top-left-corner, div.bottom-left-corner,
div.top-right-corner, div.bottom-right-corner
{position:absolute; width:20px; height:20px;
background-color:#FFF; overflow:hidden;}
div.top-left-inside, div.bottom-left-inside,
div.top-right-inside, div.bottom-right-inside
{position:relative; font-size:150px; font-family:arial;
color:#E6E6E6; line-height: 40px;}
div.top-left-corner { top:0px; left:0px; }
div.bottom-left-corner {bottom:0px; left:0px;}
div.top-right-corner {top:0px; right:0px;}
div.bottom-right-corner {bottom: 0px; right:0px;}
div.top-left-inside {left:-8px;}
div.bottom-left-inside {left:-8px; top:-17px;}
div.top-right-inside {left:-25px;}
div.bottom-right-inside {left:-25px; top:-17px;}
div.box-contents {
position: relative; padding: 8px; color:#000;
}
Now we should have a simple rounded box—without those pain-in-the-rear images! Take a look at the example for the finished product!
Concluding Problems
So here is where you come in. I’ve done alot of the ground work. Now you CSS masters need to come in and do your wizardry. Here are some problems or unknowns with my code:
- Even when changed to ems, it doesn’t like it when Gecko-rendering engines resize it. Yet when the font-size is changed in the body css, it scales okay. I haven’t figured this one out.
- When the fonts are chanegd to largest or smallest in IE, a small grey bar appears at the bottom.
- If the content is less than two lines, it don’t look purdy.
- Hasn’t been tested with alot of platforms yet. I’m also not sure how different types of anti-aliasing schemes would affect the corners, but I’m guessing they would.
- My code is desperately screaming to be simplified. I’m sure this could be done easier, and I’m sure someone will figure out how to do it was two lines of CSS. Well, maybe four.
- I have not figured out a way to outline this with a css border. In order to do something like this, another class may have to be added, which would add more complexity to the code.
- Because of the box model, the box contents have to be decently far from the corners because of the span tags. This could be a problem for some people who want these in a tight place. I believe this could be fixed with some playing with position, maybe even making a consession to change the text’s position to absolute.
Credit Where Credit is Due
I know I’m not the first one to think of this. I saw a website around eight or so months ago that did something like this, although the way it was done was pretty inefficient. Unhappily, I’ve lost the link. If anyone knows where this might be, please let me know and I will gratefully link to it.
Edit: Dave Shea pointed out to me some of Literary Moose’s experiments that are a variation of what I am trying to do. I’m going to look at some of his research and see if it will shed some solutions on the problem list.
Next Part
Part 2 of this article will address some of the problems with this version (see Concluding Problems) and show some different techniques that could be done with this (including different corner sizes!).
Update 11/28/06: Well, it’s been almost two years since I’ve written this article, but it is by far the most popular page on this site. There is and will be no part two – I’ve lost interest – but some have refined this method (see comments). I’ve removed the “part 1″ from the title.
Update 01/25/07: Here are some related links: