CSS3 Borders
With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border - without using a design program, like Photoshop.The following border properties are:
- border-radius
- box-shadow
- border-image
- Internet Explorer 9 supports two of the new border properties.
- Firefox requires the prefix -moz- for border-image.
- Chrome and Safari requires the prefix -webkit- for border-image.
- Opera requires the prefix -o- for border-image.
- Opera supports the new border properties.
CSS3 Borders:
With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border - without using a design program, like Photoshop.The following border properties are:
- border-radius
- box-shadow
- border-image
- Internet Explorer 9 supports two of the new border properties.
- Firefox requires the prefix -moz- for border-image.
- Chrome and Safari requires the prefix -webkit- for border-image.
- Opera requires the prefix -o- for border-image.
- Opera supports the new border properties.
A. Rounded corners:
In CSS3, the border-radius property is used to create rounded corners:Syntax:
- -webkit-border-radius: 10px;
- -moz-border-radius: 10px;
- border-radius: 10px;
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> border-radius </title>
<style type="text/css">
#box
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
</style>
</head>
<body>
<div id="box">The border-radius property allows you to add rounded corners to elements.</div>
</body>
</html>
Result:
B. Circle :
we can also create circles by using this property.Syntax:
· -moz-border-radius: 50px;
· -webkit-border-radius: 50px;
· border-radius: 50px;
Example:
2.CSS3 Box Shadow:
In CSS3, the box-shadow property is used to apply shadow to boxes or depth of the elements.Syntax:
· -webkit-box-shadow: 1px 1px 3px #292929;
· -moz-box-shadow: 1px 1px 3px #292929;
· box-shadow: 1px 1px 3px #292929;
Box-shadow accepts four parameters:
- x-offset -1px
- y-offset - 1px
- blur - 3px
- color of shadow - #292929
{
box-shadow: 10px 10px 5px #888888;
}
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> box-shadow </title>
<style type="text/css">
#box
{
width:300px;
height:100px;
background-color: #663333;
-moz-box-shadow: 10px 10px 5px #888888; /* Firefox 3.6 and earlier */
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
Result:
B. box-shadow in color : use blue and green color to magnify each shadow.
Syntax:· -webkit-box-shadow: 1px 1px 3px green, -1px -1px blue;
· -moz-box-shadow: 1px 1px 3px green,-1px -1px blue;
· box-shadow: 1px 1px 3px green, -1px -1px blue;
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> box-shadow in color </title>
<style type="text/css">
#box
{
width:300px;
height:100px;
background-color: #fff;
-moz-box-shadow: 3px 3px 3px green, -2px -3px blue; /* Firefox 3.6 and earlier */
box-shadow: 3px 3px 3px green, -2px -3px blue;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
Result:
C. Clever Shadows: By using shadows to the(:before )and (:after) in pseudo-classes, we can create shadow.
HTML:<div class="box">
<img src="box.jpg" alt="clever" />
</div>
Syntax: css
.box:after { content: ‘ ‘; position: absolute;
z-index: -1; /* hide shadow behind image */
/* The Shadow */
-webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one half of the remaining 30% (see width above) */
height: 100px;
}
Example:
D. Flexible Box Model:
The flexible model allows us to get away from the floats. It will wrap according to the properties.Let’s create a simple two-column layout.
HTML:
<div id="container">
<div id="column1"> Column1content here </div>
<div id="column2"> Column2 content here </div>
</div>
Syntax: css
#container {
background: none repeat scroll 0 0 #EEEEEE;
display: -moz-box;
height: 350px;
margin: auto;
width: 870px;
}
#column1 {background: #33FFFF ;}
#column2 {background: #9900CC ;}
Example:
When we fix width of the content area #column1, let see what will happen.Syntax: css
#column1 {background: #33FFFF; width: 700px ;}
Example:
Note:
Still the second column hasn’t taken all of the remaining space. By using the new box-flex property, the instruct element will take up all available space.
Syntax:
#column2{background:#9900CC;display: block; /* cause is HTML5 element */
/* take up all available space */
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}
Example:
D. CSS3 Border Image:
With the CSS3 border-image property you can use an image to create a border:
The border-image property allows you to specify an image as a border!
Syntax:
div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
border-width:15px;
width:250px;
padding:10px 20px;
}
#round
{
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}
#stretch
{
-moz-border-image:url(border.png) 30 30 stretch; /* Firefox */
-webkit-border-image:url(border.png) 30 30 stretch; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
border-image:url(border.png) 30 30 stretch;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer does not support the border-image property.</p>
<p>The border-image property specifies an image to be used as a border.</p>
<div id="round">Here, the image is tiled (repeated) to fill the area.</div>
<br />
<div id="stretch">Here, the image is stretched to fill the area.</div>
<p>Here is the image used:</p>
<img src="border.png" />
</body>
</html>
Result:
| Property | Description |
| border-image | A shorthand property for setting all the border-image-* properties |
| border-radius | A shorthand property for setting all the four border-*-radius properties |
| box-shadow | Attaches one or more drop-shadows to the box |
