CSS expandable rounded corners with one image.

Tutorials

Here is a cool snippet on how to create expandable rounded corners with css selectors and one image.

To create the rounded corners I used 3 divs, Left corner, right corner, and center. The left corner and right corner use the same background image and is positioned with background-position. The 3rd div is to fill the gap between the left and right divs by using overflow:hidden. The cool thing with overflow:hidden is that when applied to a div it will expand all the way to a left or right float div. The 4th div with the class name round_content is were we keep all our content. Then the last 3 divs are same as the top 3 but with different positioning.

CSS

HTML

Example

For an example see below or click here.