CSS3 Borders

## CSS Basic

CSS HOME CSS Introduction CSS Syntax CSS Id & Class CSS How To CSS Backgrounds CSS Text CSS Fonts CSS Links CSS Lists CSS Tables

## CSS Box Model

CSS Box Model CSS Border CSS Outline CSS Margin CSS Padding

## CSS Advanced

CSS Grouping/Nesting CSS Dimension CSS Display CSS Positioning CSS Floating CSS Align CSS Pseudo-class CSS Pseudo-element CSS Navigation Bar CSS Image Gallery CSS Image Opacity CSS Image Sprites CSS Media Types CSS Attr Selectors

## CSS3 Tutorial

CSS3 Introduction CSS3 Borders CSS3 Backgrounds CSS3 Gradients CSS3 Text Effects CSS3 Fonts CSS3 2D Transforms CSS3 3D Transforms CSS3 Transitions CSS3 Animations CSS3 Multiple Columns CSS3 User Interface CSS Summary

## CSS Examples

CSS Examples CSS Quiz CSS Certificate

## CSS References

CSS Reference CSS Selectors CSS Reference Aural CSS Web Safe Fonts CSS Units CSS Colors CSS Color Values CSS Color Names CSS Color HEX

# CSS3 Borders

« Previous
Next Chapter »

## 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

Add rounded corners to a div element:

div
{
border:2px solid;
border-radius:25px;
}
Try it yourself »

## CSS3 Box Shadow

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 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!

The original image used to create the border above:

## Example

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

div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
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

« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE