Friday, January 29, 2010

Rediscovering CSS DIVs and containers for rounded corners development

Now you can create rounded corners with pure CSS coding. Among CSS3's handy new features is the border-radius property, which offers a clean and simplified way of adding rounded corners to elements on your page. Rounded corners can be modified for placement to any corner thus, enabling the coder to apply rounded corners to any or all four corners of an element. This feature supports all type browser except IE and can also be applied to images.

Properties of the border-radius:
  • -moz-border-radius: value
  • -webkit-border-radius: value

The "value", usually a singular value, will define the radius of the border of all four corners of your element.

Here's an example of the values set to 10px at all four corners

-moz-border-radius: 10px;
-webkit-border-radius: 10px;

Properties of individual border-radius:

  • -moz-border-radius-topleft
  • -moz-border-radius-topright
  • -moz-border-radius-bottomright
  • -moz-border-radius-bottomleft
  • -webkit-border-top-left-radius
  • -webkit-border-top-right-radius
  • -webkit-border-bottom-right-radius
  • -webkit-border-bottom-left-radius

 Here's an example of selected values set to develop a tear shape appearance

Blogspot Vision
#tearshape{
background: #B73A28;
padding: 3px 5px;
color: white;
font-weight: bold;
text-decoration: none;
-moz-border-radius: 9px 3px 9px 3px;
-webkit-border-radius: 3px;
-webkit-border-top-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;

}

The border-radius property can also be applied to images, like the example below







#curve{
background: url(http://www.xataka.com/images/Blogger.Logo-thumb.png);
width: 250px;
height: 120px;
-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
-moz-border-radius-topleft: 25px;
-moz-border-radius-bottomright: 25px;
-webkit-border-top-left-radius: 25px;
-webkit-border-bottom-right-radius: 25px;

}

4 comments:

  1. nice...
    i'll give you something my dear friends...
    https://developer.mozilla.org/en/CSS/-moz-border-radius

    ReplyDelete
  2. wow...new performance...
    its cool dude...:D, by the way any ; in you featured links side...:-P

    ReplyDelete
  3. Hi,
    I tried this style but it is not supported in Internet Explorer. Also the attribute -moz-border-radius and others are not a valid attribute if checked in jigsaw.w3.org

    Regards
    AMjad Khan

    ReplyDelete
  4. amazing !!!
    thanx

    ReplyDelete