Techie Tip of the Week: Create Rounded Corners Using CSS3!

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

Tags: , ,

2 Responses to “Techie Tip of the Week: Create Rounded Corners Using CSS3!”

  1. Blog Developer LeThao.Net Says:

    Blog Developer LeThao.Net…

    [...]IT Services Technology Training Techie Tips » Blog Archive » Techie Tip of the Week: Create Rounded Corners Using CSS3![...]…

  2. Tự động tạo backlink miễn phí | Auto backlink Says:

    Tự động tạo backlink miễn phí | Auto backlink…

    [...]IT Services Technology Training Techie Tips » Blog Archive » Techie Tip of the Week: Create Rounded Corners Using CSS3![...]…

Leave a Reply

You must be logged in to post a comment.