Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

CSS 3

Learn step by step



CSS3 Borders

With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border

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.


<!DOCTYPE html>
<html>
<head>
<style>
.b1{
border:2px solid black;
padding:10px 40px;
background:#FAC7E7;
width:300px;
border-radius:50px;}
</style>
</head>
<body>
<p class="b1">The border-radius property allows you to add rounded corners to elements.</p>
</body>
</html>

output

This is box with rounded radius of 50px;

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.


<!DOCTYPE html>
<html>
<head>
<style>
.b1{
border:2px solid black;
padding:10px 40px;
background:#FAC7E7;
width:300px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;}
</style>
</head>
<body>
<p class="b1">The border-radius property allows you to add rounded corners to elements.</p>
</body>
</html>

output

This is box with roundes border with top left and right both corner set to 20px;

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.

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.

<!DOCTYPE html>
<html>
<head>
<style>
.b1{ border:2px solid black;
padding:10px 40px;
background:#FAC7E7;
width:300px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;}
</style>
</head>
<body>
<p class="b1">The border-radius property allows you to add rounded corners to elements.</p>
</body>
</html>

Output

Box with shadow of 10px
border-image

<!DOCTYPE html>
<html>
<head>
<style>
div{border:15px solid transparent;
width:250px;
padding:40px 10px;} #round{-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera 10.5-12.1 */
border-image:url(border.png) 30 30 round;} </style>
</head>
<body>
<div id="round">Image is repeated up to area.</div>
</body>
</html>

Output



Related Videos