Rounded corners are often lauded in the design world, UX / UI people claim rounded edges are easier on the eyes and makes information easier to process by our brains. A few years back it used to be a pain to achieve this effect though. With a developer having to use multiple rules in their style sheets to achieve compatibility over the major browsers. Luckily times have changed and a developer can easily round the corners of their designs with the use of the CSS3 border-radius property.
To use the border-radius property in its most simplest form, you simply need to add it to your elements definition and specify the length of the rounded edge in pixels e.g
#myElement {
margin: auto;
height: 200px;
width: 200px;
border: 1px solid #0000FF;
padding: 5px 5px 5px 5px;
border-radius: 10px;
}
The above use of the property will simply round all for corners of the elements with the id “myElement” to a length of 10 pixels.
See example.
Read the rest of this entry »