Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

How to Apply the CSS3 Border-Radius Effect

The CSS3 border-radius effect defines rounded corners. And, you need to use browser-specific prefixes when defining a border-radius. Here a few rules for defining a border-radius:

  • You can’t apply a border-radius to a selector (a CSS style) that doesn’t have either a defined height or width (at least one or the other).

  • The basic property for a border-radius in CSS3 is border-radius, followed by a value. For example, border-radius:12px; creates rounded corners on all four corners of the element to which it is applied. And the “rounding” of those corners will extend for 12 pixels from the corners.

  • You can define separate radii for each corner of a border. For example:

border-top-left-radius:1px;
border-top-right-radius:2px;
border-bottom-right-radius:3px;
border-bottom-left-radius:4px;

Take the following example: a class style that defines both borders and border radii. The following CSS style creates a .borders class that applies both borders and border radii to any element to which it is applied:

.borders {
      border:12px solid gray;
      border-top-left-radius:48px;
      border-top-right-radius:24px;
      border-bottom-right-radius:12px;
      border-bottom-left-radius:6px;
      padding: 12px;
}

The outcome of the preceding code, as shown in the Chrome browser, depicts the class selector (style) with a defined border and defined border radii properties.

image0.jpg

The rounded corner (border-radius) code works fine in contemporary versions of IE and Chrome because those browsers do not require a prefix for this effect. But to make border-radius work in Mozilla Firefox, WebKit browsers like Safari (for desktop/laptop and mobile), and some versions of Opera, you have to make three copies of the border-radius code with the appropriate prefixes, like this:

.borders {
      border:12px solid gray;
      border-top-left-radius:48px;
      border-top-right-radius:24px;
      border-bottom-right-radius:12px;
      border-bottom-left-radius:6px;
      -moz-border-top-left-radius:48px;
      -moz-border-top-right-radius:24px;
      -moz-border-bottom-right-radius:12px;
      -moz-border-bottom-left-radius:6px;
      -webkit-border-top-left-radius:48px;
      -webkit-border-top-right-radius:24px;
      -webkit-border-bottom-right-radius:12px;
      -webkit-border-bottom-left-radius:6px;
      -o-border-top-left-radius:48px;
      -o-border-top-right-radius:24px;
      -o-border-bottom-right-radius:12px;
      -o-border-bottom-left-radius:6px;
      padding: 12px;
}

Only with four versions of the CSS style definition will this border work in all major, current browsers.

Folks viewing the page in older browsers have to forego the enhanced design experience they’d get if they were viewing the page in a current-generation browser. But because the CSS3 effect isn’t a requirement to view the actual page content, it’s still accessible (and in this example, the border still appears).

blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.