How to Create a Media Query in Dreamweaver
Create a New Style Sheet in the CSS Styles Panel
How to Apply CSS3 Effects and Transforms in Dreamweaver

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
CSS Code Hinting in Dreamweaver
Preview HTML Documents on a Cellphone, Tablet, or Laptop in Dreamweaver
How to Generate Images Using Gradient Image Maker on CSS3
Four Types of Cascading Style Sheets in Web Design
How to Modify the Layouts in CSS3
Advertisement

Inside Dummies.com