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.In this chapter you will learn about the following border properties:
- border-radius
- box-shadow
- border-image
Browser Support
| Property | Browser Support | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| border-radius | ||||||||||
| box-shadow | ||||||||||
| border-image | ||||||||||
Internet Explorer 9+ supports border-radius and box-shadow.
Firefox, Chrome, and Safari supports all of the new border properties.
Note: Safari 5, and older versions, requires the prefix -webkit- for border-image.
Opera supports border-radius and box-shadow, but requires the prefix -o- for border-image.
CSS3 Rounded Corners
Adding rounded corners in CSS2 was tricky. We had to use different images for each corner.In CSS3, creating rounded corners is easy.
In CSS3, the border-radius property is used to create rounded corners:
This box has rounded corners!
Example
<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
}
</style>
</head>
<body>
<div>The border-radius property allows you to add rounded corners to elements.</div>
</body>
</html>
No comments: