User login

Recent comments

Pure CSS rounded corners without images and javascript

In this article I will show you how to make a rounded corner boxes without using images or javascript. We will use pure CSS2 only. However, some browsers support border radius property of CSS3.

This trick will apply to all browsers including IE6 which is know as headache for web developers.

<style type="text/css">
 
    .container {
        display: block;
    }
 
    .content {
        background: #ccc;
    }
 
    .round_span3 {
        background: #ccc;
        display: block;
        line-height: 1px;
        overflow: hidden;
        height: 1px;
        margin: 0 3px;
    }
 
    .round_span2 {
        background: #ccc;
        display: block;
        line-height: 1px;
        overflow: hidden;
        height: 1px;
        margin: 0 2px;
    }
 
    .round_span1 {
        background: #ccc;
        display: block;
        line-height: 1px;
        overflow: hidden;
        height: 1px;
        margin: 0 1px;
    }
</style>
<div class="container">
    <span class="round_span3"></span>
    <span class="round_span2"></span>
    <span class="round_span1"></span>
    <div class="content">
        <!-- Content goes here --> My name is Bond
        <br/>
        James Bond
    </div>
    <span class="round_span1"></span>
    <span class="round_span2"></span>
    <span class="round_span3"></span>
</div>

Now you can make rounded corders using pure CSS that is consistent across browsers.

Valid XHTML
Posted under:

Comments on this post

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
1 + 1 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.

Custom Services

If you are looking a Drupal theme or project developer, feel free to contact me.

Contact

Recent Free Themes

Recent Articles


Browse