In the previous chapter you learnt the basic about the CSS3 Animation. In this chapter we will learn about the CSS3 Borders, which is most useful when you try to design a stylish container for your content.
CSS3 Borders
A CSS3 Border is such an affords of style sheet which reduces the human efforts of Photoshop and other graphical applications. An individual can create the rounded borders, border shadow, imaged based border and etc. with the help of CSS3 Border.
Basically We use three features to create the border:
✔ border-radius
✔ box-shadow
✔ border-image
border-radius is a such property of CSS3 by which we can create the rounded corners.
box-shadow is a such property of CSS3 by which we can create the shadow of the border.
border-image is a such property of CSS3 by which we can create the customized border, as we can put our own image as a border.
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title Name will go here</title>
</head>
<style>
#border_radius
{
border:2px solid;
font-size: 14px;
color: #ffffff;
font-weight: bold;
padding: 10px;
background: #6AAFCF;
border-radius:25px;
-moz-border-radius:25px; /* For Firefox Browser */
-webkit-border-radius: 25px; /* For Safari and Google Chrome Browser */
-o-border-radius: 25px /* For Opera Browser */
}
#box_shadow
{
font-size: 14px;
color: #ffffff;
font-weight: bold;
padding: 10px;
background: #6AAFCF;
-moz-box-shadow: 15px 15px 5px #888245; /* For Firefox/Mozilla */
-webkit-box-shadow: 15px 15px 5px #888245; /* For Google Chrome and Safari */
-o-box-shadow: 15px 15px 5px #888245; /* For Opera */
box-shadow: 15px 15px 5px #888245;
}
#border_image
{
border-width: 15px;
-moz-border-image:url(media/border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(media/border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(media/border.png) 30 30 round; /* Opera */
border-image:url(media/border.png) 30 30 round;
}
</style>
<body>
<div id="border_radius">
With the help of border-radius properties, we can make the rounded corners border.
</div>
<div id="box_shadow">
With the help of box-shadow properties, we can create the shadow for a box.
</div>
<div id="border_image">
You can see the customized border. This could be either *.png or *.jpg format.
</div>
</body>
</html>