ACTIVITY:

CSS3 ROUNDED CORNERS

Now that you have worked with borders and the box model, you may have begun to notice a lot ofrectangles on your web pages! Still in draft form and not yet an official standard, CSS3 introduces theborder-radius property, which can be used to create rounded corners and soften up those rectangles.

There is a complication when using this technique, though- developers of browser renderingengines, such as WebKit (used by Safari and Google Chrome) and Gecko (used by Firefox and otherMozilla-based browsers), have developed their own proprietary properties to implement roundedcorners. In addition, Internet Explorer 9 is the first version of IE to support the borderradiusproperty. So, you need to code three different style declarations to round those corners:

-webkit-border-radius (for WebKit browsers)

-moz-border- radius (for Gecko browsers)

border-radius (W3C Draft Syntax)

Eventually all browsers will support CSS3 and the border-radius property, so code this propertylast in the list. CSS declarations to set a border with rounded corners are show below. If you wouldlike a visible border to display, configure the border property. Then set the value of the threeborder-radius properties to a value below 20px for best results.

border: l px solid #000000;

-webkit- border- radius: l5px;

-moz -border-radius: 15px;

border-radius: l5px;

The web page (chapter7/box4.html) shows this code in action. With progressiveenhancement in mind, your visitors using olderversions of Internet Explorer will see right-angle ratherthan rounded corners. However, the functionality andusability of the web page will not be affected.

Be aware that when you code the non-standard properties,your CSS will not pass W3C validation. Keep inmind that another approach to getting a rounded look isto create a rounded rectangle background image with a graphics application. However, once CSS3becomes a well-supported standard, the box model will be easy to "round out" and is a much moreefficient way to accomplish rounded corners.

HANDS ON PRACTICE

You'll configure a logo header area that uses a background image and rounded borders. When complete, your web page will look similar to the one shown.

  1. Create a new folder called CSS_Borders.
  1. Copy thelighthouselogo.jpg and the background.jpg files in the chapter7/starters folder to yourCSS_Borders folder.
  1. A starter file is readyfor you in the student files. Copy thechapter7/starterl.html file to your CSS_Bordersfolder.
  1. Launch a browser to display thestarter1.html web page.
  1. Launch a text editor or Dreamweaver and open the starter1.htmlfile. Save the file as index.html.
  1. Edit the embeddedCSS and add the following style declarations to the h1 selector that willconfigure the lighthouselogo.jpg image as a background image that does notrepeat: height set to 100px, width set to 700px, font size set to 3em, 150px ofleft padding, 20px of top padding, no top margin, and a solid dark blue border(#000033) with a border radius of 15px.

The style declarations are as follows:

h1 {

background-image: url(lighthouselogo.jpg);

background-repeat: no-repeat;

height: l00px;

width: 700px;

font- size: 3em;

padding-left: 150px;

padding-top: 30px;

margin-top: 0;

border: lpx solid #000033;

-webkit-border-radius: 15px;

-moz-border-radius: 15px;

border-radius: 15px;

}

  1. Save the file. When you test your index.html file in a browser, it should look similar tothe one shown above if you are using a browser that supports rounded corners.

Otherwise the logo will have right-angle corners, but the web page will still be usable.

Activity - CSS3 Rounded Corners.docVersion 1

Page 1 of 3