Simple rounded corners

A friend of mine was trying to get a rounded corner bar at the top of some web content. He already had the rounded corner images but didn’t know the HTML and CSS markup. I sent him over the following snippet of code as an example:

    <div style="width:100%;background-color:blue;height:14px;margin:0px;padding:0px;font-size:5%;">
        <div style="float:left;background-image:url('left.gif');width:14px;height:14px;">
        </div>
        <div style="float:right;background-image:url('right.gif');width:14px;height:14px;">
        </div>
    </div>

To understand, note the following:

• The width:100% should be set the width appropriate to your content.
• The width and height (14px in the example above) should be replaced by the actual width and height of your rounded corner images.
• What’s with the font-size:5%? Making the font size very small will ensure that any white space will not create a block larger than the desired height (in our case, 14px).

The following bar was made using the above content, using images from this web site.

Popularity: 13% [?]

Related posts:

1. Dvorak, ye shalt not throw stones
2. Naming CSS properties, HTML properties… and fighting five-year olds
3. Goodbye, old friend
4. Is Verizon FiOS TV in your area? Don’t try checking online.
5. Don’t overpay for wooden spoons