Posts Tagged ‘cascading syt’

Until the advent of CSS3, if webmasters wanted to create a rounded border, they would need to create it using an image of a rounded border. (Here’s for an example of the old way of creating a rounded border.)

Now, you no longer need to “fake” your rounded corners — no longer do you need to have boxy entries surrounded by pictures of rounded edges. The new CSS3 property border-radius lets you create the elusive rounded corner!

Because CSS3 is not yet a full standard, you will need to use the vendor browser prefixes.

The CSS properties you’ll need to use are -webkit-border-radius, -moz-border-radius, and border-radius

For example, to produce content in a grey H2 with 10 pixels of padding that has 25-pixel rounded corners:

<h2 style=”-webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; background: #ccc; padding: 10px;”>This H2 has rounded corners!</h2>

would produce:

This H2 has rounded corners!

Note: As of this writing, border-radius does NOT work in Internet Explorer version 8 or earlier.

For details, visit http://caniuse.com/#search=border-radius