Getting Started Steps

• Expression Web 3
• Expression Web 4

 

• HTML 5
• Scrolling Text Box
• CSS for Beginners

Using CSS 3 in Expression Web 4

Making rounded corners with CSS 3 is very simple.  However, not all web browsers support CSS3 rounded corners properties.  Internet Explorer, for instance, happens to be one of those browsers that sill does not have support for CSS 3 Rounded Corners.

So.....how can we make rounded corners that will render in all web browsers?  There is a brand new answer for this!!!

Keep reading.....  You must learn how to apply CSS 3 styles to your style sheets before we can discuss the new technique to make IE render these CSS3 effects.

 

Follow These Steps:

1. 1.  Learn how to round your corners using CSS3 border-radius property
2. 2. Watch the Video to get a better idea of how to write CSS3 directly onto your style sheet in EW
3. 3. Finally, Go Have Some "PIE"!!

Border-Radius Property

CSS 3 border-radius Property

CSS 3 'border-radius' property, technically, is the property to use if you want to created round corners without using an image.

However, 'border-radius' will not work.  Why not?   --->  Lack of cross browser support.  Specifically, Internet Explorer 8 and earlier does not support this CSS 3 Property.

Therefore, we will use proprietary properties for Firefox and for Safari.

 

Mozilla Firefox Rounded Corners

-moz-border-radius:  This is Mozilla-specific CSS Property that we will use to create round corners on all 4 corners of an element (such as div).

 

WebKit

-webkit-border-radius:  This Property will round corners if Safari and Google Chrome.

 

How to use -moz-border-radius to round all 4 corners of a page element for Firefox.

Since Expression Web does not provide support for CSS 3, we have to do this a manually.

Open your Style Sheet and manually type the property and value by appending it to an existing style. 

For instance, let's say you want to make rounded corners on the container div.  Just add -moz-border-radius to the #container style by opening your External style sheet and writing the property value pair directly onto your style sheet.

Example:

#container {   
width: 900px;  
margin: 0 auto;   
background-color: #777;   
-moz-border-radius: 12px;
}

 

 

What if you want to round just one or two corners?

 

• -moz-border-radius-topleft:12px;
• -moz-border-radius-topright:8px;
• -moz-border-radius-bottomleft:12px;
• -moz-border-radius-bottomright:8px;

What Units of Measurement Can be Used?

You can use Pixels(px) or EMs (em).

 

Use -webkit-border-radius to round all 4 corners of a page element in Safari or Google Chrome.

-webkit-border-radius:12px;

Or, Style Each Corner Individually

• -webkit-border-top-left-radius:12px;
• -webkit-border-top-right-radius:12px;
• -webkit-border-bottom-left-radius:12px;
• -webkit-border-bottom-right-radius:12px;

 

Be creative and round one, two, three, or all 4 corners.

 

Summary

When rounding all 4 corners of a particular element, we will write the following properties directly onto our External Style Sheet:

-webkit-border-radius:10px;
-moz-border-radius: 10px;

We would add the above property:value pairs to an existing Style, such as the #container Style, and this would round the corners on the container.

If you want to round specific corners individually, then just write those property:value pairs that you need and specify the particular corner to style as explained earlier.

 

What about Internet Explorer?

 

Watch the Video:  Using CSS3 to Round Corners