2011/10/23

CSS3 rounded borders with border radius.

How many of you designers out haven't wished it was possible to create rounded borders on a webpage without  having to make 4 corner images and then using complicated CSS to make the images 'stick' to the corners of the box only to find that your trick didn't work the same in all the browsers? Well, now it is with the new CSS3 property called border-radius.

Before CSS3 the only way to create round borders on web sites was with images and even that solution had a few inherit problems. One of which was scaling (images don't scale to well when you want to change the width of the box); another was CSS bugs in different browsers (because of buggy browser's (mostly IE) floated or positioned images didn't display the same way on all the browsers without a few CSS hacks). Thankfully those days are over. Using the new CSS3 property, border-radius, it is possible to make round or even elliptical borders across browsers using simple CSS syntax.

Here is a basic example:
This box should have a rounded corners for Firefox, Safari/Chrome, Opera and IE9.

Here is the code for this div:

.example1{
  background-color:skyblue;
  margin:1em;
  padding:20px;


  border-radius:15px;
  -moz-border-radius:15px;


}

Syntax


border-radius: <border-radius>{1,4} [ / <border-radius>{1,4}]?


Rounded corners can be created independently using the four individual border-*-radius properties (border-bottom-left-radius, border-top-left-radius, etc.) or for all four corners simultaneously using the border-radius shorthand property.

The border-*-radius properties can each accept either one or two values, expressed as a length or a percentage (percentages refer to the corresponding dimensions of the border box).


Where two values are supplied these are used to define, in order, the horizontal and vertical radii of a quarter ellipse, which in turn determines the curvature of the corner of the outer border edge i.e. how large that corner is on that axis. Where only one value is supplied, this is used to define both the horizontal and vertical radii equally. If either value is zero, the corner will be square, not round.


The following diagram gives a few examples of how corners might appear given differing radii:




The border-radius shorthand property can be used to define all four corners simultaneously. The property accepts either one or two sets of values, each consisting of one to four lengths or percentages.


The first set of (1-4) values define the horizontal radii for all four corners. An optional second set of values, preceded by a ‘/’, define the vertical radii for all four corners. If only one set of values are supplied, these are used to determine both the vertical and horizontal equally.



For each set of values the following applies:
If all four values are supplied, these represent the top-left, top-right, bottom-right and bottom-left radii respectively. If bottom-left is omitted it is the same as top-right, if bottom-right is omitted it is the same as top-left, and if only one value is supplied it is used to set all four radii equally.

Browser Support

At the moment Firefox (version 4 onward), Internet Explorer (version 9 onward), Opera (version 10.5 onward), Safari (version 5 onward) and Chrome (version 4 onward) all support the individual border-*-radius properties and the border-radius shorthand property as natively defined in the current W3C Specification.


Firefox (version 1 onward) with the -moz- prefix, and Google Chrome (version 0.2 onward) and Safari (version 3 onward) with the -webkit- prefix already offered basic support for the shorthand syntax. However, IE 8 and previous offered no support.


It is recommended for backward compatibility to include the -moz- property as well. Here is a table of how the old Mozilla extensions corresponds with the W3C specification:



W3C SpecificationMozilla Implementation
border-radius-moz-border-radius
border-top-left-radius-moz-border-radius-topleft
border-top-right-radius-moz-border-radius-topright
border-bottom-right-radius-moz-border-radius-bottomright
border-bottom-left-radius-moz-border-radius-bottomleft

More Examples:


border: solid 10px;
 
 /* the border will curve into a 'D' */
 border-radius: 0 50px 50px 0;
 border: groove 1em red;
 border-radius: 2em;
  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;
   background: gold;
   border-radius: 40px 10px; 
background: black;
color: gray;
border-radius: 50%;


Sources:

http://www.css3.info/preview/rounded-border/
https://developer.mozilla.org/en/CSS/border-radius
http://www.w3.org/TR/css3-background/

1 comment:

  1. Hi,Alerts and features are specifically designed to help Web Design Cochin reduce overtime, lower theft,Thanks......

    ReplyDelete