8/4/13

Related Searches: PHP Tutorials Create HTML AJAX Programming Learn PHP W eb Design Templates Free HTML Tutorial HTML And JavaScript Download The Opera Browser
HOME HTML C SS JAVASC RIPT JQUERY XML

CSS3 Borders

Search w3schools.c Select Language ASP.NET PHP SQL MORE...

R EFER ENC ES | EXAMPLES

Get Certified
Study Web Technologies and get a diploma at w3schools.com

HTML5+CSS+jQuery Build HTML5 we bsite s Build HTML5 m obile apps www.k e ndoui.com Learn Ethical Hacking Be com e A C ybe r Se curity Ex pe rt And Ex ce l In Inform ation Se curity. www.innobuzz.in/Hack ing Download DocBook Editor Visual e ditor for DocBook docum e nts W YSIW YG e diting base d on C SS www.ox yge nx m l.com

CSS3 Tutorial
CSS3 HOME CSS3 Introduction CSS3 Borders CSS3 Backgrounds CSS3 Text Effects CSS3 Fonts CSS3 2D Transforms CSS3 3D Transforms CSS3 Transitions CSS3 Animations CSS3 Multiple Columns CSS3 User Interface

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

CSS3 References
CSS3 Reference CSS3 Browser Support CSS3 Selectors CSS3 Reference Aural CSS3 Web Safe Fonts CSS3 Units CSS3 Colors CSS3 Color Values CSS3 Color Names CSS3 Color HEX

Browser Support
Property b o r d e r r a d i u s b o x s h a d o w b o r d e r i m a g e 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. Browser Support

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:

d i v { b o r d e r : 2 p xs o l i d ; b o r d e r r a d i u s : 2 5 p x ; }
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:

d i v { b o x s h a d o w :1 0 p x1 0 p x5 p x# 8 8 8 8 8 8 ; }

www.w3schools.com/css3/css3_borders.asp

1/3

8/4/13
Try it yourself

CSS3 Borders

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:

d i v { b o r d e r i m a g e : u r l ( b o r d e r . p n g )3 03 0r o u n d ; w e b k i t b o r d e r i m a g e : u r l ( b o r d e r . p n g )3 03 0r o u n d ;/ *S a f a r i5a n do l d e r* / o b o r d e r i m a g e : u r l ( b o r d e r . p n g )3 03 0r o u n d ;/ *O p e r a* / }
Try it yourself

New Border Properties

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

Previous

Next Chapter

Build Your Powerful HTML Website for Free with Wix

Start building your own stunning website - programming free! Wix.com provides a free, easy-to-use online platform that lets you create and publish your own unique website. Its powerful editing tools & customizable website designs make building a beautiful website easy. Add eCommerce features, connect a custom domain and experience superior SEO results. Wix is your ultimate solution for creating an exquisite HTML website. Over 20 million users have created their website with Wix. Create yours now!

Book Your Air Ticket

Round Trip Leaving From: Going To:
-----------------------------

One Way Passengers:

1

Depart Date:
4 Aug 2013

Return Date:
4 Aug 2013

Top 10 Tutorials
HTML Tutorial HTML5 Tutorial C SS Tutorial C SS3 Tutorial JavaScript Tutorial jQuery Tutorial SQL Tutorial PHP Tutorial ASP.NET Tutorial XML Tutorial

Top 10 References
HTML/HTML5 Reference C SS 1,2,3 Reference C SS 3 Browser Support JavaScript HTML DOM XML DOM PHP Reference jQuery Reference ASP.NET Reference HTML C olors

Examples
HTML Examples C SS Examples XML Examples JavaScript Examples HTML DOM Examples XML DOM Examples AJAX Examples ASP.NET Examples Razor Examples ASP Examples SVG Examples

Quizzes
HTML Quiz HTML5 Quiz XHTML Quiz C SS Quiz JavaScript Quiz jQuery Quiz XML Quiz ASP Quiz PHP Quiz SQL Quiz

Color Picke

Statistics

Browser Stat Browser OS Browser Disp

www.w3schools.com/css3/css3_borders.asp

2/3

8/4/13

CSS3 Borders

RE P O RT E RRO R

HO ME

TO P

P RI N T

FO RU M

A BO U T

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use and privacy policy. C opyright 1999-2013 by Refsnes Data. All Rights Reserved.

www.w3schools.com/css3/css3_borders.asp

3/3