Documentos de Académico
Documentos de Profesional
Documentos de Cultura
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
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
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
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
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
Previous
Next Chapter
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
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