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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.