X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY ANGULAR XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

CSS3 Borders


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

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Property
border-radius 9.0 5.0
4.0 -webkit-
4.0
3.0 -moz-
5.0
3.1 -webkit-
10.5
box-shadow 9.0 10.0
4.0 -webkit-
4.0
3.5 -moz-
5.1
3.1 -webkit-
10.5
border-image 11.0 16.0
4.0 -webkit-
15.0
3.5 -moz-
6.0
3.1 -webkit-
15.0
11.0 -o-


CSS3 The border-radius Property - 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

Add rounded corners to a div element:

div {
    border: 2px solid;
    border-radius: 25px;
}

Try it yourself »


CSS3 The box-shadow Property

In CSS3, the box-shadow property is used to add shadow to boxes:


Example

Add a box-shadow to a div element:

div {
    box-shadow: 10px 10px 5px #888888;
}

Try it yourself »


CSS3 The border-image Property

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!

The original image used to create the border above:

Border

Example

Use an image to create a border around a div element:

div {
    -webkit-border-image: url(border.png) 30 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 30 round;
}

Try it yourself »


CSS3 Border Properties

Property Description CSS
border-image A shorthand property for setting all the border-image-* properties 3
border-radius A shorthand property for setting all the four border-*-radius properties 3
box-shadow Attaches one or more drop-shadows to the box 3



Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates FREE Website Templates Free HTML Templates

SHARE THIS PAGE

facebook