Themes & Stuffs that are absolutely worth

Top class table-less, CSS designs
Highly optimized for performance
Various theme configuration options
Themes with installation profile
Free E-mail support

PSD to Drupal

Get your design converted into world class Drupal theme by Drupal experts. Our PSD to Drupal service starts from just $599.

More details

User login

Pure CSS rounded corners without images and javascript

Fri, 02/05/2010 - 03:25

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.

UPDATE: For bigger radius, increase number or span tags below and above with different class and increase margin to its css like this:

For more radius:
 
<div class="container">
    <span class="round_span7"></span>
    <span class="round_span6"></span>
    <span class="round_span5"></span>
    <span class="round_span4"></span>
    <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>
    <span class="round_span4"></span>
    <span class="round_span5"></span>
    <span class="round_span6"></span>
    <span class="round_span7"></span>
</div>
 
CSS:
 
<style type="text/css">
 
    .container {
        display: block;
    }
 
    .content {
        background: #ccc;
    }
    .round_span7 {
        background: #ccc;
        display: block;
        line-height: 1px;
        overflow: hidden;
        height: 1px;
        margin: 0 7px;
    }
    .round_span6 {
        background: #ccc;
        display: block;
        line-height: 1px;
        overflow: hidden;
        height: 1px;
        margin: 0 6px;
    }
    .round_span5 {
        background: #ccc;
        display: block;
        line-height: 1px;
        overflow: hidden;
        height: 1px;
        margin: 0 5px;
    }
    .round_span4 {
        background: #ccc;
        display: block;
        line-height: 1px;
        overflow: hidden;
        height: 1px;
        margin: 0 4px;
    }
 
    .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>

Valid XHTML | Demo

Posted under:

css
html

Add new comment

Comments on this post

Guest said on Fri, 04/30/2010 - 18:04

Very Nice but how i can increase the radius

Guest said on Sat, 07/17/2010 - 04:28

yes i also want to increase the radius and set the border of box

Zenmed said on Mon, 05/03/2010 - 11:26

Something is not working with changing the radius. Or am I doing something wrong? Can you give and explanation step but step please?

Gaurang Daslania said on Fri, 05/21/2010 - 06:37

Hello,
Same Questing as a Zenmed.
Can you suggest some modification in css,so we can increase/decrease radius.
Thanks

Matt said on Thu, 09/30/2010 - 12:12

This works fine until you put tags in the content area. Then it breaks.

Cy said on Thu, 10/21/2010 - 14:38

I have just tested it, it works fine on all browsers, except IE8... Darn... Do you have any suggestions?

Search

Custom Project

If you are looking for a Custom Drupal theme or Drupal project developer, you can contact us to get a quote.

Theme customization

We offer affordable Drupal theme customization service. You can use this service to let us customize your theme.

Articles

Recent Free Themes

wLite - A Simple but advanced Drupal theme
wLite is a Drupal theme from Worthapost. This theme looks...
Admire Grunge - A grunge drupal theme
Another high quality free Drupal theme contributed to Drupal community.
Crusti - Drupal theme with color module support
After a long gap, I am back with a new free theme for Drupal. This theme is designed in a way that will suit most type of websites.
Addari - A Drupal theme by Worthapost
Addari has been release for Drupal 5.x and 6.x. Actully this theme was released on...
Web 2.0 drupal theme Admire Gray
This is the release of my new Drupal theme in Admire series. This design is based on ...

Shopping cart problem is now fixed
We were experiencing shopping cart issues from last few days. But now every issue related to the cart is now fixed.
We have PSD to Drupal service is launched
We have launched PSD to Drupal theme development service from today.
Purple color scheme added to Endless Mirror Drupal theme
We have added a new Purple color scheme to our Endless Mirror magazine theme for Drupal.
New theme, Endless Publish is coming soon
I would like to inform our visitors that we are about to release a new theme
Remove/Change search this site label in Drupal search form
In this article I will show you how to remove Search this site:

Themes