/    Sign up×
Reference /Pin to ProfileBookmark

This property is a shorthand that sets the width of the borders of an element.

Syntax

border-width is a shorthand that sets the border-top-width, border-right-width, border-bottom-width and border-left-width properties.
Anywhere from one to four values can be used with this shorthand. Each value sets the top, right, bottom and left values respectively. If the third and/or fourth value aren’t specified, they take the values from the first and second values respectively. If only one value is used, it is applied to all four sides.
Other than using the thin, medium and thick keyword values, any type of length value can be used.

/* Specifying all borders to be thick: */
border-width: thick;

/* Specifying the top and bottom borders to be thin,
while the left and right borders will have the width of 6px: */
border-width: thin 6px;

/* Specifying only 3 values:
top border 3px, right border 6px, bottom border 9px, 
left border will be 6px, same as the right border: */
border-width: 3px 6px 9px;

/* Specifying all four values: 
top border 0.25em, right border 0.5em, bottom border 0.75em, left border 1em: */
border-width: 0.25em 0.5em 0.75em 1em;

Values

length
Any length unit can be used.

medium
Sets the borders to be of medium thickness. This is the default value.

thin
Sets the borders to be thin.

thick
Sets the borders to be thick.

initial
Global CSS keyword – this sets the property to the default value.

inherit
Global CSS keyword – this sets the property to be inherited from its parent element.

Browser Compatibilty

Demos

Have a code example of border-width? Submit a codepen.io demo and we'll showcase it here

to submit a demo.
CSS
×

Success!

Help @reference spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ,
analytics: Fullres
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Marika,
tipped: article
amount: 1000 SATS,

tipper: @hatem774,
tipped: article
amount: 1 SATS,

tipper: @nearjob,
tipped: article
amount: 1000 SATS,
)...