Creating rounded corners using images and css

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 ahieve a pretty niffty way to creating a rounded corner box.

Category:

Howto & Style

Tags:

• css
• rounded
• corners
• dynamic
• box
• video

[002Tchiputu]

How can i use this technique on internet explorer?

[tafevc]

Hi David. Thank you for this - excellent! Where can we find the source code?

[IncoherentTraveler]

@iMachacker - I agree, but unfortunately it doesn't validate.

[iMachacker]

yea its called

moz

and

webkit

10x easier its like 2 lines of coding

[nonthingarea]

I really like the FROM THE COUCH's tutorial

It's easily understandable and acceptable

thanks~

[vxcriss]

I finally figured out what your approach on corner transparency was. Which is you have none. I couldn't figure out how your implementation can achieve transparency, and only then I watched carefully and saw that you actually have the corner image's background in gray color, meaning images will have to be redone if you want to have the box over a different colored background.

The funny thing is, you don't need all your code :) just use 4 nested divs and only give color bg to the bottommost ;)

[vxcriss]

Hey do you have the source files for this example available anywhere on the web? I have my own versions of DIV & CSS rounded boxing but I'm pretty curious to see the details of your approach, the video is not too readable.

[CamiloSanchez1979]

wow dude, this is cool, where is the code?