0% found this document useful (0 votes)
3 views5 pages

CSS Border Width

The document provides an overview of the CSS border-width property, which specifies the width of borders for elements. It explains how to set the width using specific sizes or predefined values (thin, medium, thick) and demonstrates how to apply different widths to individual borders. Additionally, it includes examples of CSS code to illustrate the use of border-width in styling elements.

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)
3 views5 pages

CSS Border Width

The document provides an overview of the CSS border-width property, which specifies the width of borders for elements. It explains how to set the width using specific sizes or predefined values (thin, medium, thick) and demonstrates how to apply different widths to individual borders. Additionally, it includes examples of CSS code to illustrate the use of border-width in styling elements.

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/ 5

 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 Border Width
CSS Comments
CSS Errors ❮ Previous Next ❯
CSS Colors 
CSS Backgrounds 
CSS Borders
Borders

CSS Border Width
Border Width
The border-width property specifies the width of the four borders.
Border Color
Border Sides The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined
Border Shorthand values: thin, medium, or thick:
Rounded Borders
CSS Margins 
CSS Padding Example
CSS Height/Width
CSS Box Model Demonstration of the different border widths:
CSS Outline  p.one {
CSS Text  border-style: solid;
CSS Fonts  border-width: 5px;
CSS Icons }
CSS Links
CSS Lists p.two {
CSS Tables border-style: solid;

CSS Di l
CSS Display border-width: medium; ❯
 Tutorials  References } Exercises  Certificates  Upgrade Get Certified

HTML CSS JAVASCRIPT SQL PYTHON


p.three { JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY
border-style: dotted;
CSS Tutorial border-width: 2px;
}
CSS HOME
CSS Introduction
p.four {
CSS Syntax
border-style: dotted;
CSS Selectors border-width: thick;
CSS How To }
CSS Comments
CSS Errors Result:
CSS Colors  COLOR
CSS Backgrounds 
5px border-width
PICKER
CSS Borders 
Borders
Border Width medium border-width
Border Color
Border Sides
Border Shorthand
2px border-width 
Rounded Borders 
CSS Margins  thick border-width
CSS Padding
CSS Height/Width
CSS Box Model Try it Yourself »
CSS Outline 
CSS Text 
CSS Fonts 
CSS Icons
CSS Links Specific Side Widths
CSS Lists
CSS Tables 
CSS Di l
CSS Display
The border-width property can have from one to four values (for the top border, right border, bottom ❯
 Tutorials  References  Exercises  Certificates 
border, and the left border):
Upgrade Get Certified

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

CSS Tutorial Example


CSS HOME
p.one {
CSS Introduction border-style: solid;
CSS Syntax border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
CSS Selectors }
CSS How To
CSS Comments p.two {
border-style: solid;
CSS Errors
border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
CSS Colors  }
CSS Backgrounds 
CSS Borders  p.three {
Borders border-style: solid;
Border Width border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px
Border Color left */
}
Border Sides
Border Shorthand
Rounded Borders Try it Yourself »
CSS Margins 
CSS Padding
CSS Height/Width
CSS Box Model
CSS Outline ?
CSS Text


Exercise
CSS Fonts  Which property is used to set the width of an element's border?
CSS Icons
CSS Links
border-style
CSS Lists
CSS Tables 
CSS Di l
CSS Display

 Tutorials  References 
border-width
Exercises  Certificates  Upgrade Get Certified

HTML CSS JAVASCRIPT SQL border-color


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

border-radius
CSS Tutorial
CSS HOME
CSS Introduction Submit Answer »
CSS Syntax
CSS Selectors
CSS How To
CSS Comments
CSS Errors
CSS Colors ❮ Previous Next ❯

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
PLUS SPACES GET CERTIFIED FOR TEACHERS
CSS Outline 
CSS Text 
CSS Fonts 
CSS Icons
FOR BUSINESS CONTACT US
CSS Links
CSS Lists
CSS Tables TopTutorials Top References Top Examples
CSS Di l
CSS Display HTML Tutorial HTML Reference HTML Examples

 Tutorials  CSS Tutorial
References 
JavaScript Tutorial
Exercises  Certificates  CSS Reference
JavaScript Reference
CSS Examples
Upgrade
JavaScript Examples
Get Certified
How To Tutorial SQL Reference How To Examples
HTML CSS SQL Tutorial SQL
JAVASCRIPT PYTHON JAVA PHP Python Reference
HOW TO W3.CSS C C++ C# SQL Examples
BOOTSTRAP REACT MYSQL JQUERY
Python Tutorial W3.CSS Reference Python Examples
W3.CSS Tutorial Bootstrap Reference W3.CSS Examples
Bootstrap Tutorial PHP Reference Bootstrap Examples
CSS Tutorial PHP Tutorial HTML Colors PHP Examples
Java Tutorial Java Reference Java Examples
CSS HOME C++ Tutorial Angular Reference XML Examples
CSS Introduction jQuery Tutorial jQuery Reference jQuery Examples

CSS Syntax Get Certified


CSS Selectors HTML Certificate
CSS Certificate
CSS How To
JavaScript Certificate
CSS Comments Front End Certificate
SQL Certificate
CSS Errors Python Certificate
PHP Certificate
CSS Colors  Certificate
jQuery
CSS Backgrounds Java Certificate

C++ Certificate
CSS Borders C#
Certificate
XML Certificate
Borders
Border Width
Border Color
Border Sides      FORUM ABOUT ACADEMY
Border Shorthand W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
Rounded Borders of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
CSS Margins  Copyright 1999-2025 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.
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