Rounded corners with CSS

Many of the techniques for creating rounded corners with CSS requires that the author modifies the existing HTML, inserting anonymous div’s or images. My version of rounded corners use CSS generated content, so that one doesn’t have to alter existing markup. Read the howto

This technique allows CSS rounded corners to be added to boxes of any size, as it automatically adapts to the width and height of the content.

9 Comments

  1. Ohhh, thanks for posting this! I hadn’t seen a really good example of something to do with before and after yet, but I’d been wanting to look into it now that Mozilla is supporting it nicely… I can’t wait to play with this! 🙂 (I’m using the -moz-border-radius property on one of my skins right now because I liked the looks of rounded corners but didn’t care if it wasn’t gonna show up in all browsers!!)

  2. I join kristine in her joy in you posting this code. I’ve been searching the net for something like this for some time now. Come morning I’ll play around with this code and use it!

  3. Mark

     /  2003-08-10

    Brilliant combination of using both background images and CSS generated images in :before and :after! Very, very nicely done!
    There have been other attempts at CSS generated rounded boxes, amongst others by myself and Literary Moose.
    Myself:
    Follow the Arrows
    Explanation
    Literary Moose:
    More sophistated adaptation of my technique

  4. linkyness

    I’m finding such good links while catching up on news reads that I just had to share some of them….

  5. CSS only rounded corners

    I found Rounded corners with CSS – Virtuelvis today. Yet another neat little CSS thing that gets stuffed by crap browsers, IE in particular. I know I’m not the first to say this, I’ll bet I’m not even in the first 10, I’m just getting more and more fru…

  6. Tom

     /  2004-04-02

    Blogginnlevering 2: Blogganmeldelse.

    I faget huin105 skal det anmeldes en blogg av fritt valg, hvor karakteren teller 10% på sluttkarakteren. Jeg har valgt å ta for meg Virtuelvis.com. Virtuelvis er den engelske bloggen til webutvikleren Arve Bersvendsen, den norske heter antibiomatika, m…

  7. jelentette tendenciát azonos jelszóvédelmen ugyanannyiba

  8. Yes, safari does render :before & :after the same way that Mozilla does, but there’s one crucial problem with safari’s rendering, which doesn’t allow the alteration of :before & :after pseudo-elements on instances like hover or first-child. What I mean is that the CSS below will not work in safari;
    bc. .selector:hover .rounded:before {

    }
    I know you dont mention this in your article, but I thought I might bring it to your attention. I think safari might have a more strict approach to the doubling of pseudo-elements than Mozilla.

  9. Anyone know of any imageless tabs?