CSS3 Borders – Rounded Corners
November 24, 2012
Remember the days, when in order to get rounded corners on your borders, you had to create little corner images with pictures of your round corners? That was quite a PITA, and back then, my designs usually had beautiful 90 degree angled borders. But now, with CSS3, rounded borders can be created with simple CSS. Amazingly enough, the border-radius is supported as of IE9, Firefox 4, Chrome 5, Safari 5, and Opera 10.5. Considering that at the time I’m writing this (November 2012), the latest stable versions are IE 9, Firefox 16, Chrome 22, Safari 6, and Opera 12, I’m not going to concern myself with the older, non-supporting versions.
So adding a simple:
border-radius: 25px; |
creates a nicely rounded border. (Do keep in mind that you also have to define the border – for my example, I added a simple ‘border: black 1px solid’). And HERE you can see how different numbers of pixel create different corner radii.
So far, we’ve just looked at one basic command covering all four corners identically, but we can actually address each corner individually by defining this:
border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius |
And now, we can get really creative – SEE HERE – isn’t this just too much fun???
If you have any questions about this tutorial or run into trouble trying it yourself, post your question/problem in the Killersites Forum for help.
