Create rounded corners with CSS or Image

Submitted by admin on Mon, 2011-04-25 22:04

One of the main reasons why designers use images on a Web page is to create curves and rounded corners. It’s currently impossible to create any kind of curved shapes using pure HTML, so images need to be applied. Rounded corners is one of the most popular and frequently requested CSS techniques. Actually, there are a lot of methods and techniques to create rounded corners with Cascading Stylesheets, but in this articale, I'll show you two ways to create rounded corners: Using border radius proberty of CSS3 and Using images width CSS Whichs I ussually used.

1. Using Border radisu property of CSS3.

The CSS3 border-radius property allows you to easily utilise rounder corners in your design, without the need for corner images or the use of multiple <div> tags, and maybe this is one of the most talked about aspects of CSS3.

The code is verry simple:
       #example {
              border-radius: 15px;
       }

However, for the moment, you’ll also need to use the -moz- prefix to support Firefox and -webkit- for safari or chrome:
      #example {
             -moz-border-radius: 15px;
             -webkit-border-radius: 15px;
             border-radius: 15px;
      }

Here are the CSS and browser-specific attributes:

CSS3 (Opera browser)	Mozilla equivalent	WebKit equivalent
border-top-right-radius	-moz-border-radius-topright	-webkit-border-top-right-radius
border-bottom-right-radius	-moz-border-radius-bottomright	-webkit-border-bottom-right-radius
border-bottom-left-radius	-moz-border-radius-bottomleft	-webkit-border-bottom-left-radius
border-top-left-radius	-moz-border-radius-topleft	-webkit-border-top-left-radius
border-radius	-moz-border-radius	-webkit-border-radius

2. Using Images.

Create rounded corner with Border radius property dosen't work in IE and can't apply for image. So in some cases, you need to using images to create rounded corners. This is a sample of using image to create rounded corrner.

This is HTML source code:

<div class="block-corner">
    <div class="block-corner-inner">
         Content here bla bla
    </div>

First, you need prepare 4 images for 4 corners: top-left, top-right, bottom-right and bottom-left.

Then, we'll use css to make rounded corner:

1 - We need only create a simple style box for block-corner-inner

.block-corner-inner {
background: #e2f19e;
border: 5px solid #cdea46;
}

2 - Add 4 <div> tags to 4 corners using position absolute property. But we add position relative for .block-corner first.

.block-corner {
position: relative;
}

.corner-top-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 7px; // width of top-left image
    height: 7px; // height of top-left image
    background: url(images/corner-top-left.jpg) 0 0 no-repeat;
}
.corner-top-right{
    position: absolute;
    top: 0;
    right: 0;
    width: 7px; // width of top-rightimage
    height: 7px; // height of top-rightimage
    background: url(images/corner-top-right.jpg) 0 0 no-repeat;
}
.corner-bottom-right{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 7px; // width of bottom-rightimage
    height: 7px; // height of bottom-rightimage
    background: url(images/corner-bottom-right.jpg) 0 0 no-repeat;
}
.corner-bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 7px; // width of bottom-left image
    height: 7px; // height of bottom-left image
    background: url(images/corner-top-left.jpg) 0 0 no-repeat;
}

This is result: