0% found this document useful (0 votes)
10 views6 pages

CSS Borders

Uploaded by

marcar1976
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
10 views6 pages

CSS Borders

Uploaded by

marcar1976
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

 Tutorials  References  Exercises  Certificates  Search... Upgrade Get Certified

HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY

CSS Tutorial
CSS HOME
CSS Introduction
CSS Syntax
CSS Selectors
CSS How To CSS Borders
CSS Comments
CSS Errors ❮ Previous Next ❯
CSS Colors 
CSS Backgrounds 
CSS Borders
Borders

CSS Borders
Border Width
The CSS border properties allow you to specify the style, width, and color of an element's border.
Border Color
Border Sides
Border Shorthand I have borders on all sides.
Rounded Borders
CSS Margins 
CSS Padding
I have a red, bottom border.
CSS Height/Width
CSS Box Model
CSS Outline 
CSS Text  I have rounded borders.
CSS Fonts 
CSS Icons
CSS Links
I have a blue, left border.
CSS Lists
CSS Tables 
CSS Di l
CSS Display
 Tutorials  CSS
References  Border
Exercises  Style
Certificates  Upgrade

Get Certified

HTML CSS JAVASCRIPT SQL PYTHON


The border-styleJAVA
propertyPHP HOW
specifies TOkind of
what W3.CSS
border to C C++
display. C# BOOTSTRAP REACT MYSQL JQUERY

CSS Tutorial The following values are allowed:


CSS HOME
dotted - Defines a dotted border
CSS Introduction
dashed - Defines a dashed border
CSS Syntax
solid - Defines a solid border
CSS Selectors
double - Defines a double border
CSS How To
groove - Defines a 3D grooved border. The effect depends on the border-color value
CSS Comments
ridge - Defines a 3D ridged border. The effect depends on the border-color value
CSS Errors
inset - Defines a 3D inset border. The effect depends on the border-color value
CSS Colors  COLOR
outset - Defines a 3D outset border. The effect depends on the border-color value
CSS Backgrounds  none - Defines no border PICKER
CSS Borders  hidden - Defines a hidden border
Borders
Border Width The border-style property can have from one to four values (for the top border, right border, bottom
Border Color border, and the left border).
Border Sides
Border Shorthand 
Rounded Borders Example 
CSS Margins 
CSS Padding Demonstration of the different border styles:
CSS Height/Width
p.dotted {border-style: dotted;}
CSS Box Model
p.dashed {border-style: dashed;}
CSS Outline  p.solid {border-style: solid;}
CSS Text  p.double {border-style: double;}
CSS Fonts  p.groove {border-style: groove;}
CSS Icons p.ridge {border-style: ridge;}
CSS Links p.inset {border-style: inset;}
p.outset {border-style: outset;}
CSS Lists
p.none {border-style: none;}
CSS Tables 
CSS Di l
CSS Display p.hidden {border-style: hidden;} ❯
 Tutorials  References p.mix
Exercises  Certificates
{border-style: 
dotted dashed solid double;} Upgrade Get Certified

HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY
Result:

CSS Tutorial
CSS HOME A dotted border.
CSS Introduction
CSS Syntax A dashed border.
CSS Selectors
CSS How To A solid border.
CSS Comments
CSS Errors A double border.
CSS Colors 
CSS Backgrounds A groove border. The effect depends on the border-color value.

CSS Borders 
Borders A ridge border. The effect depends on the border-color value.
Border Width
Border Color
An inset border. The effect depends on the border-color value.

Border Sides
An outset border. The effect depends on the border-color value.
Border Shorthand
Rounded Borders
No border.
CSS Margins 
CSS Padding A hidden border.
CSS Height/Width
CSS Box Model A mixed border.
CSS Outline 
CSS Text 
CSS Fonts  Try it Yourself »
CSS Icons
CSS Links
CSS Lists
CSS Tables 
CSS Di l
CSS Display
Note: None of the OTHER CSS border properties (which you will learn more about in the next chapters) ❯
 Tutorials  Referenceswill Exercises
 have 
ANY effect Certificates
unless 
the border-style property is set! Upgrade Get Certified

HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY

CSS Tutorial
CSS HOME
?
CSS Introduction
Exercise
CSS Syntax
CSS Selectors Which CSS property specifies the type of border to display?
CSS How To
CSS Comments border-width
CSS Errors
CSS Colors  border-color
CSS Backgrounds 
CSS Borders border-style

Borders
border-radius
Border Width
Border Color
Border Sides Submit Answer »
Border Shorthand
Rounded Borders
CSS Margins 
CSS Padding
CSS Height/Width
CSS Box Model ❮ Previous Next ❯
CSS Outline 
CSS Text 
CSS Fonts 
CSS Icons
CSS Links
CSS Lists
CSS Tables 
CSS Di l
CSS Display

 Tutorials  References  Exercises  Certificates  Upgrade Get Certified

HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY

CSS Tutorial
CSS HOME
 PLUS SPACES GET CERTIFIED FOR TEACHERS

CSS Introduction
CSS Syntax
CSS Selectors FOR BUSINESS CONTACT US
CSS How To
CSS Comments
CSS Errors
Top Tutorials Top References Top Examples
CSS Colors HTML
 Tutorial HTML Reference HTML Examples
CSS Tutorial CSS Reference CSS Examples
CSS Backgrounds  Tutorial
JavaScript JavaScript Reference JavaScript Examples
How To Tutorial SQL Reference How To Examples
CSS Borders  Tutorial
SQL Python Reference SQL Examples
Borders Python Tutorial W3.CSS Reference Python Examples
W3.CSS Tutorial Bootstrap Reference W3.CSS Examples
Border Width Bootstrap Tutorial PHP Reference Bootstrap Examples
PHP Tutorial HTML Colors PHP Examples
Border Color Java Tutorial Java Reference Java Examples
Border Sides C++ Tutorial Angular Reference XML Examples
jQuery Tutorial jQuery Reference jQuery Examples
Border Shorthand
Get Certified
Rounded Borders
CSS Margins HTML Certificate
 Certificate
CSS
CSS Padding JavaScript Certificate
Front End Certificate
CSS Height/Width SQL Certificate
Python Certificate
CSS Box Model
PHP Certificate
CSS Outline jQuery Certificate

Java Certificate
CSS Text  Certificate
C++
C# Certificate
CSS Fonts  Certificate
XML
CSS Icons
CSS Links
CSS Lists
     FORUM ABOUT ACADEMY
CSS Tables 
CSS Di l
CSS Display W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.

 Tutorials  References  Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
Exercises  Certificates 
of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
Upgrade Get Certified

HTML CSS JAVASCRIPT SQL Copyright 1999-2025


PYTHON JAVA byPHP
Refsnes Data.
HOW AllTO
Rights Reserved.
W3.CSSW3Schools
C is C++
Powered by
C#W3.CSS.
BOOTSTRAP REACT MYSQL JQUERY

CSS Tutorial
CSS HOME
CSS Introduction
CSS Syntax
CSS Selectors
CSS How To
CSS Comments
CSS Errors
CSS Colors 
CSS Backgrounds 
CSS Borders 
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders
CSS Margins 
CSS Padding
CSS Height/Width
CSS Box Model
CSS Outline 
CSS Text 
CSS Fonts 
CSS Icons
CSS Links
CSS Lists
CSS Tables 
CSS Di l

You might also like