border-width
Anonymous contributor
Published Jun 28, 2021Updated Oct 21, 2023
Contribute to Docs
Shorthand property that sets the width for the overall border of an element or for each side individually.
Syntax
/* Keyword values */border-width: thin;border-width: medium;border-width: thick;/* <length> values */border-width: 4px;border-width: 1.2rem;/* top and bottom | left and right */border-width: 2px 1.5em;/* top | left and right | bottom */border-width: 1px 2em 1.5cm;/* top | right | bottom | left */border-width: 1px 2em 0 4rem;/* Global values */border-width: inherit;border-width: initial;border-width: revert;border-width: revert-layer;border-width: unset;
The border-width
property may be specified using one, two, three, or four values.
- When one value is specified, it applies the same width to all four sides.
- When two values are specified, the first width applies to the top and bottom, the second to the left and right.
- When three values are specified, the first width applies to the top, the second to the left and right, the third to the bottom.
- When four values are specified, the widths apply to the top, right, bottom, and left in that order (clockwise).
Example 1
Set all borders of the h1
element to medium
width:
h1 {border-color: green;border-style: dashed;border-width: medium;}
The following image demonstrates the code block above:
Example 2
Set the width of the border top and bottom to be 4px
and left and right to 2px
:
h1 {border-color: green;border-style: dashed;border-width: 4px 2px;}
The following image demonstrates the code block above:
Example 3
Set the width of the border top to 10px
, right and left to medium
and bottom to thick
:
h1 {border-color: green;border-style: dashed;border-width: 10px medium thick;}
The following image demonstrates the code block above:
Example 4
Set the width of the border top to 10px
, right to thin
, left to 20px
and bottom to thick
:
h1 {border-color: green;border-style: dashed;border-width: 10px thin 20px thick;}
The following image demonstrates the code block above:
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn CSS on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Career path
Full-Stack Engineer
A full-stack engineer can get a project done from start to finish, back-end to front-end.Includes 51 CoursesWith Professional CertificationBeginner Friendly150 hours - Free course
Learn CSS
In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.Beginner Friendly6 hours