Fire and Knowledge

Rounded Corners Without Images, Part 1
May 22, 2004  |  Filed under:  | 

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">
            &bull;
        </div>
    </div>
    <div class="bottom-left-corner">
        <div class="bottom-left-inside">
            &bull;
        </div>
    </div>
    <div class="top-right-corner">
        <div class="top-right-inside">
            &bull;
        </div>
    </div>
    <div class="bottom-right-corner">
        <div class="bottom-right-inside">
            &bull;
        </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!).

15 Comments »

The URI to TrackBack this entry is: http://www.fireandknowledge.org/archives/2004/05/22/rounded-corners-without-images-part-1/trackback/

  1. Josh Sowin
    over at Fire and Knowledge has a nice html tutorial on rounded corners sans images but still needs your help. So here is where you come in. I’ve done alot of the ground work. Now you CSS masters need to…

    Trackback by Foreword — 5/26/2004 @ 11:45 am

  2. A lot of pointless extra markup don’t you think? It’s like nested tables all over again.

    Comment by Luke Redpath — 6/3/2004 @ 2:01 pm

  3. Very very nice! I MUST remember this technique, thanx :)

    Comment by The Lizzzard — 6/3/2004 @ 2:33 pm

  4. Nice concept. But like Redpath said, a lot of extra markup. Saving the load time on a 10byte image might be negligible in comparison.

    Comment by Dave — 6/3/2004 @ 4:16 pm

  5. obviously an image would be easier o use ; but with that being said the markup can be dimmed down a lot. So i wouldnt rule out this tech yet, and when it go’s ‘mainstream’ im sure Dave & Ralph would take full advantage of you’re hard work, nice job.

    Comment by Steven — 6/3/2004 @ 5:16 pm

  6. I have a small demo of this on my site
    here
    and also a demo of rounded tab navigation without graphics or bullets totally resizeable
    here

    Comment by Stu Nicholls — 6/4/2004 @ 4:46 am

  7. It breaks after I increase text size just once. That isn’t good.

    Comment by Scott — 6/4/2004 @ 8:56 am

  8. I actually didn’t say an image would be “easier to use". And to be fair, the 10byte image size I mentioned could be upwards of a 1kb.

    Why I would prefer using images over this method (at least in it’s current state) is that it can be applied to (mostly) meaningful markup. A header and an anchor for example. My ultimate goal when designing using css is to try my best to not use tags that’s single purpose is to define the look of the content. Am I alwasys successful? Of course not. But it’s what I strive for.

    Anyway, I didn’t mean to devalue your hard work in any way. This is great explorarty stuff. I’ll be keeping watch to see how it evolves.

    Comment by Dave — 6/4/2004 @ 2:36 pm

  9. MKDesign has been doing this for ages:

    http://www.krikette.com/mkdesign and her older templates are http://geocities.com/morlockkidesign/templates.htm

    could that be where you saw it?

    Comment by francey — 6/4/2004 @ 9:46 pm

  10. In my Opera 7.5, the bullets go on top of the text thus making some of it impossible to read. To fix that, one can add z-index: 1; to definition of div.box-contents.

    Just a hint.

    Comment by Jarek Piórkowski — 6/5/2004 @ 1:18 pm

  11. Thanks for all the comments and tips everyone! I’m currently working on Part 2 which should fix most of these problems and also simplify the markup. I’m still open to suggestions though, so keep them coming! :)

    Comment by Josh S — 6/6/2004 @ 1:39 pm

  12. Pretty useless “technique” - it breaks when the text size is increased even a little. But nice try…

    Comment by jj — 6/8/2004 @ 10:28 am

  13. Interesting hack, but not usable due to many accessibility problems with those unmeaningful •. What will think a blind person when his screenreader arrives at those “bulls"? “hey I’m missing something” “that crappy screenreader!".
    keep it simple.

    Comment by Carcarlo — 6/8/2004 @ 10:57 am

  14. […] 10/6/2004 Rounded Corners in CSS without images I came across this site with a tutorial on rounded corners using CSS wit […]

    Pingback by timmadden.com.au » Rounded Corners in CSS without images — 6/10/2004 @ 11:27 am

  15. I actually had this idea 4 years ago, when I was 14 (i’m serious) and CSS was still pretty new. I created an entire page using this method only - no images. However, after I was done, I found a few problems:

    first, like other people have mentioned, it breaks when text-size is changed.
    second, it has no anti-aliasing and looks rather rough.
    third, font-sizes are unreliable across different platforms and browsers. for example, in opera there is just a slightest bump in your current navigation sidebar (above the word ‘about’).
    fourth, when a user ’selects all’, the corners will be selected, and this will intefere especially when the user copies and pastes.
    fifth, the gains in using text are not noticeable - the extra markup makes up for it, and complicates. the gains in production time are not significant either - i found it much more frustrating to use this method than using images.
    carcarlo is also right about accessibility. at the risk of sounding cliched, don’t fix what isn’t broken. but do continue to work on it, maybe you could turn it into something useful!

    Comment by Pei Yi — 6/20/2004 @ 10:48 am

RSS feed for comments on this post.

Leave a comment

Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

(required)

(required)


© Fire and Knowledge
RSS 2.0   |   Comments RSS 2.0   |   WordPress