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.
Comments
Comment from kristine on 2003-08-08 09:32
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!!)
Comment from Tommy on 2003-08-10 02:16
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!
Comment from Mark on 2003-08-10 23:49
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
Comment from Bentley K. Frog on 2005-11-20 20:56
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;
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.
Comment from Johan on 2006-04-11 18:04
Anyone know of any imageless tabs?
This discussion has been closed. No further comments may be added.