Creating rounded corners using images and css
Posted on 04 March, 2009 at 15:11 PM
There are already 21 Comments
About the Show
In this tutorial, David takes you through the steps of creating a dynamic sizing box which has rounded corners.
By getting clever with your splicing and div layouts you can achieve a pretty nifty way to creating a rounded corner box.
Source file: Rounded Corners
Related Shows
- (1) Episode 189 - Using Inspiration Effectively
- (5) Episode 187 - Design with the Lights On
- (8) Episode 186 - Apples and Oranges
- (2) Episode 185 - Design like a Dictator
- (7) Episode 179 - It's All About Themes
User Comments
Ross 04 Mar, 2009 15:53:23 PM
First! :D
Looks good and seems to work.
Isn't there a cleaner way of doing it without the nested divs though?
Mike Martin 05 Mar, 2009 02:53:45 AM
Hey man, great video (as they all are), I really appreciate your guys work, it is all incredible! I was just wondering if you guys could possibly do a CSS tutorial on how to use the "sliding door" technique for menus and the like, if you could, that would be awesome! Thanks again!
Julie 05 Mar, 2009 05:47:46 AM
Great tutorial; I'll definately be using this!!
I like your version a lot better. I figured my version out but just playing around for hours. I just used two images, one for the top of the box and one for the bottom, but I like this a lot better, especially for when users re-size the font, it's going to flow better. Or for liquid layouts.
Cheers, Julie
Noah 05 Mar, 2009 06:34:22 AM
Good simple tutorial that's easy to follow. It's too bad we have to resort to so many nested elements but it's what we're stuck with until all browsers support the border image properties in CSS3. (We can dream, right?)
I'd recommend trimming your CSS to remove the redundant rules though. Things like the background color really only need to be defined once on the outer most div and the height, width, overflow, and background repeat can be declared once when selectors are combined. (A minor note: the rounded corners were too hard to see because they were so small. For the sake of the tutorial, using 20px ones might be better.)
Now how about creating a tutorial that makes a variable height/width container with rounded corners AND borders. It would be great if there was a way to do that without an extra eight nested divs.
David Perel 05 Mar, 2009 10:02:10 AM
@Hugh, @Ross, @Joyage, @Lenin - Pleasure peeps ;)
@Mike - I will write it down in my diary to consider for tutorial episode :)
@Julie - Pleasure, that is why I did the tut... often people use solid images on the top and bottom but that doesn't allow for a liquid layout.
@Noah - 100%, I don't know why it slipped my mind with regards to redundancy. I will correct that for next time. With regards to a liquid box with borders..... hmmmmmmmmmm... It may be possible.
Eliot 05 Mar, 2009 12:51:03 PM
Thanks very much. I had been looking for a tutorial on rounded corners and wasn't sure what was the best method. Your video was clear and easy to understand. I hope to use this on my site soon.
Sean 05 Mar, 2009 13:05:37 PM
Tried to download this but when you go to viddler page it just shows the embeddable video. The download links there jsut refresh the page.
Was plannign to watch this on my PMP on the subway.
josh 05 Mar, 2009 14:07:55 PM
i am using css3 nowadays, but when i go oldschool i just put 4 images into the html and absolute position them to the corners. it is hardcoded, but it seems simpler than nested divs inside nested divs plus it is fully liquid.
frujo 05 Mar, 2009 14:57:19 PM
First of all thanks for your job. It was a nice explanation and everything is pretty clear.
What I'd like to add to your tutorial is that you could join all your four corners into one image (getting a circle image as a result) and then use the same image for all four divs just changing the background-position property for each of them.
Anyhow, it is a good tutorial for beginners, which inspires, so everyone may find his/her own way to improve it. Thanks.
Patrick 06 Mar, 2009 16:36:48 PM
I think the main reason not to use this method is that it requires the use of several extraneous DIVs that don't contribute to the semantic markup. I mean, that's all fine and good, but in reality we sometimes need to add extra markup to get the job done. So in theory, this method doesn't quite jive but in REALITY it's a pretty cool method.
David Perel 06 Mar, 2009 16:41:41 PM
@Patrick - I am only half concerned about the semantics in this situation. In my opinion, the web world is still quite a way from 100% semantic and the reality is that with the current browsers we have to compromise at every corner.
I am all for semantics... don't get wrong, but I am never too worried about a couple of nested divs. Those are minor issues in the greater scheme!
Thanks for your comments though mate. I appreciate the solid feedback ;)
Elena 06 Mar, 2009 16:48:48 PM
Thank you. You made that so easy and did a great job of explaining it. :)
The Standardista 06 Mar, 2009 16:51:26 PM
We are The Standardista.
Prepare to be assimilated.
Resistance is futile.
Marc Perel 06 Mar, 2009 16:58:02 PM
*Marc and Dave P run and hide, attempting to escape w3c's Wrath!*
Saylor 07 Mar, 2009 10:04:25 AM
Just wanted to drop some love.
There is something strikingly fresh about the way you guys deliver your content. Both delivery content are on the ball. Thx keep it up.
ken 08 Jan, 2010 19:51:58 PM
easy to understand tutorial! for when a similar one about sliding doors? thanks a lot!
Drop a Comment
2010 © Obox Design
From the Couch is powered by OCMX Live
Contact us on +27 21 791 0292
Hugh Collier 04 Mar, 2009 15:37:01 PM
Nice one. Another very decent tutorial. Consider it dugg and floated.
As this is so easy and works in all browsers where's the benefit of messing around with mozilla/safari only styles. Why not just use this method?