❯
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 ADVERTISEMENT
CSS HOME
CSS Introduction
CSS Syntax
CSS Selectors
CSS How To
CSS Comments
CSS Border Sides
CSS Errors
❮ Previous Next ❯
CSS Colors
CSS Backgrounds
CSS Borders
Borders CSS Border - Individual Sides
Border Width
Border Color From the examples on the previous pages, you have seen that it is possible to specify a different border for
Border Sides each side.
Border Shorthand
In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left):
Rounded Borders
CSS Margins border-top-style
CSS Padding
border-right-style
CSS Height/Width
border-bottom-style
CSS Box Model
border-left-style
CSS Outline
CSS Text In the example below we use the four properties above to set the style of each border side:
CSS Fonts
CSS Icons
CSS Links Example
CSS Lists
CSS Tables p {
CSS Display border-top-style: dotted;
CSS Max width border-right-style: solid; ❯
Tutorials References Exercises Certificatesdotted;
border-bottom-style: Upgrade Get Certified
border-left-style: solid;
HTML CSS JAVASCRIPT SQL
} PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY
CSS Tutorial
Result:
CSS HOME
CSS Introduction
CSS Syntax Different Border Styles
CSS Selectors
CSS How To
CSS Comments Try it Yourself »
CSS Errors
CSS Colors
CSS Backgrounds We can also use the shorthand border-style property to achieve the same result.
COLOR
CSS Borders PICKER
Borders The example below gives the same result as the example above:
Border Width
Border Color
Border Sides Example
Border Shorthand
p {
Rounded Borders
CSS Margins
border-style: dotted solid;
}
CSS Padding
CSS Height/Width
Result:
CSS Box Model
CSS Outline
CSS Text Different Border Styles
CSS Fonts
CSS Icons
CSS Links Try it Yourself »
CSS Lists
CSS Tables
CSS Display
CSS Max width So, here is how it works: ❯
Tutorials References Exercises Certificates Upgrade Get Certified
If the border-style property has four values:
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY
CSS Tutorial border-style: dotted solid double dashed;
top border is dotted
CSS HOME
right border is solid
CSS Introduction
bottom border is double
CSS Syntax left border is dashed
CSS Selectors
CSS How To If the border-style property has three values:
CSS Comments
CSS Errors
border-style: dotted solid double;
top border is dotted
CSS Colors
right and left borders are solid
CSS Backgrounds bottom border is double
CSS Borders
Borders If the border-style property has two values:
Border Width
Border Color border-style: dotted solid;
Border Sides top and bottom borders are dotted
Border Shorthand right and left borders are solid
Rounded Borders
If the border-style property has one value:
CSS Margins
CSS Padding border-style: dotted;
CSS Height/Width all four borders are dotted
CSS Box Model
CSS Outline
CSS Text Example
CSS Fonts
CSS Icons /* Four values */
CSS Links p {
CSS Lists border-style: dotted solid double dashed;
}
CSS Tables
CSS Display
CSS Max width /* Three values */ ❯
Tutorials References p { Exercises Certificates Upgrade Get Certified
border-style: dotted solid double;
HTML CSS JAVASCRIPT SQL
} PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY
CSS Tutorial
/* Two values */
CSS HOME p {
CSS Introduction border-style: dotted solid;
CSS Syntax }
CSS Selectors
CSS How To /* One value */
p {
CSS Comments
border-style: dotted;
CSS Errors
}
CSS Colors
CSS Backgrounds
Try it Yourself »
CSS Borders
Borders
Border Width
Border Color
Border Sides The border-style property is used in the example above. However, it also works with border-width
Border Shorthand and border-color .
Rounded Borders
CSS Margins
CSS Padding
CSS Height/Width
CSS Box Model ?
CSS Outline
Exercise
CSS Text Drag and drop the correct values to style the top border as dotted and the
CSS Fonts
right border as solid.
CSS Icons
CSS Links
CSS Lists p {
CSS Tables border- -style: dotted;
CSS Display
CSS Max width border- -style: solid; ❯
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 top bottom left right
CSS HOME
CSS Introduction
CSS Syntax Submit Answer »
CSS Selectors
CSS How To
CSS Comments
CSS Errors
CSS Colors
CSS Backgrounds
❮ Previous Next ❯
CSS Borders
Borders
Border Width
Border Color
Border Sides
ADVERTISEMENT
Border Shorthand
Rounded Borders ADVERTISEMENT
CSS Margins
CSS Padding
CSS Height/Width
CSS Box Model
CSS Outline
CSS Text
CSS Fonts
CSS Icons
PLUS SPACES GET CERTIFIED FOR TEACHERS
CSS Links
CSS Lists
CSS Tables
CSS Display
CSS Max width ❯
Tutorials References
FOR BUSINESS
Exercises
CONTACT US
Certificates Upgrade Get Certified
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY
CSS Tutorial
Top Tutorials Top References Top Examples
CSS HOME
HTML Tutorial HTML Reference HTML Examples
CSS Introduction CSS Tutorial CSS Reference CSS Examples
CSS Syntax JavaScript Tutorial JavaScript Reference JavaScript Examples
How To Tutorial SQL Reference How To Examples
CSS Selectors SQL Tutorial Python Reference SQL Examples
Python Tutorial W3.CSS Reference Python Examples
CSS How To W3.CSS Tutorial Bootstrap Reference W3.CSS Examples
CSS Comments Bootstrap Tutorial PHP Reference Bootstrap Examples
PHP Tutorial HTML Colors PHP Examples
CSS Errors Java Tutorial Java Reference Java Examples
C++ Tutorial Angular Reference XML Examples
CSS Colors Tutorial
jQuery jQuery Reference jQuery Examples
CSS Backgrounds GetCertified
CSS Borders
HTML Certificate
Borders CSS Certificate
JavaScript Certificate
Border Width Front End Certificate
Border Color SQL Certificate
Python Certificate
Border Sides PHP Certificate
jQuery Certificate
Border Shorthand Java Certificate
Rounded Borders C++ Certificate
C# Certificate
CSS Margins XML Certificate
CSS Padding
CSS Height/Width
CSS Box Model
FORUM ABOUT ACADEMY
CSS Outline W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
CSS Text Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
CSS Fonts
CSS Icons Copyright 1999-2025 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.
CSS Links
CSS Lists
CSS Tables
CSS Display
