CSS3 Borders Tutorial
In this tutorial we will look at some of the new features of the border module in CSS3. We will cover two properties. This first will be the rounded border and the second will be box shadow. It is recommended that you use one of the latest versions of available browsers when trying out these examples. These browsers are more CSS3 friendly than older version.
Rounded border
In CSS3 you can create a border with rounded corners using the border-radius property. You can change curvature of your borders by changing the size of the radius. Let us look at an example. We will create three boxes set to different border-radius values.
<html>
<head>
<style type= "text/css" >
#box1 { border-radius: 0px; }
#box2 { border-radius: 10px; }
#box3 { border-radius: 25px; }
</style>
</head>
<body>
<div id= "box1"> </div>
<div id= "box2"> </div>
<div id= "box3"> </div>
</body>
</html>
The image below shows how these different values display in a browser that supports CSS3.
You can also use the border radius property to set different values for each individual corner using the four properties, border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, and border-top-right-radius. Let us look at another example to see this more clearly. This time we will give different border values for individual corners for each of our boxes using these porpoerties.
<style type= "text/css" >
#box1 {
border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
}
#box2 {
border-top-left-radius: 10px;
border-top-left-radius: 10px;
}
#box3 {
border-top-left-radius: 0px;
border-top-left-radius: 10px;
border-bottom-left-radius: 5px;
border-bottom-left-radius: 25px;
}
</style>
The image below shows how these property values will display in a browser that supports CSS3.
Box Shadow
Another property included in the new standard is the box-shadow property. This allows you to add drop shadows to the elements in your webpage using style sheets alone. Designers no longer have to create and inset special images to create these effects.
The box-shadow property has the following syntax
box-shadow: h-shadow v-shadow blur spread color inset;
| Value | Description |
| h-shadow | This sets the value of the horizontal shadow. Positive values move the shadow to the right of the box by the given value. Negative values move the shadow to the right of the box by the given value. |
| v-shadow | This sets the value of the vertical shadow. Positive values move the shadow to the bottom of the box by the given value. Negative values move the shadow to the top of the box by the given value. |
| blur | This sets the value for the blur distance. |
| spread | This sets the size of the shadow. |
| color | This allows you to set the color of the shadow. |
| inset | You change the shadow from a drop shadow to a inset shadow using the value. |
The h-shadow and v-shadow are required values. You can change the look and feel of your shadow using the blur and spread values along with the h-shadow and v-shadow values. You will need to play with these values to get a sense of what values correspornd to different… the direction and intensity of the shadow. We will look at one example where we change the v-shadow and h-shadow values from positive to negative in order to get shadow that fall in different directions.
We will use 8px as the value for both the h-shadow and v-shadow. We will however change the sign for these values. As you will see in the image below, changing the sign changes the direction in which the shadow falls. We will apply the same blur, spread and color values for all the boxes to keep things uniform.
<style type= "text/css" >
#box1 { box-shadow:-8px -8px 15px 2px #404040; }
#box2 { box-shadow:8px -8px 15px 2px #404040; }
#box3 { box-shadow:-8px 8px 15px 2px #404040; }
#box4
{ box-shadow:8px 8px 15px 2px #404040; }
</style>
The shadow box property allows you to change the shadow from a drop shadow to a drop shadow to an inset shadow. All you have to do is add the inset
value to the box-shadow property. The box-shadow property also allows you to add more than one shadow to any given element. All you have to do is separate each individual shadow using a comma. Let us look at an example.
<style type= "text/css" >
#box1 { box-shadow:1px 0px 8px 1px #2b2b2b inset; }
#box2 { box-shadow:8px 8px 15px 2px #404040, 9px 9px 20px 3px red; }
</style>
The image below shows how this will display in the browser.
