border-width, CSS property
This page is also about physical property(ies):
And the logical properties:
Summary of characteristics of the border-width property
medium | thick | thinmediumComputed value: during an animation, the border-width property gradually changes from one value to another.Per grammar: serialization in the order of syntax.Syntax diagram of border-width.
border-width property.The links in the diagram provide more details about the values.
Download the diagram in SVG.
In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:
lengthis a positive or zero numeric value, followed by one of CSS dimension units.- From one to four values can be listed, separated by a space.
Description of the border-width property.
border-widthsets the thickness of an element's borders.
It's a shorthand property in the sense that it sets the thickness of all four borders in one go. But there are also specific properties for each of the borders:
border-top-widthborder-right-widthborder-bottom-widthborder-left-widthTo make the borders visible, also remember to set the border-style property.
This leads to a little quirk: the initial value of border-width is indeed medium (about 3 pixels),
but if border-style isn't set, the element has no border and its border thickness is counted as 0.
This is shown in the example below: border-width isn't set on either the left or right example, but the border only appears on the second example
because border-style is only set on that second element.
no border, so thickness = 0.
The initial thickness is
medium
Also note that some line styles (double, embossed effects) need a minimum thickness of 2 or 3 pixels to display properly.
Language support.
Logical properties take into account the meaning and writing direction, with the following equivalences for Latin languages:
border-top-widthborder-right-widthborder-bottom-widthborder-left-widthFor non-Latin languages, refer to the interactive diagram below:
border-top-widthborder-left-widthborder-right-widthborder-bottom-widthYou need to add the following shorthand properties, each of which accepts two values: border-block-width and border-inline-width.
They let you set the values for start and end in a single line.
Values for border-width.
- border-width: 5px 1px 2px 2px;
This is the general syntax of
border-width: from one to four values separated by spaces. The assignment rules are as follows, depending on the number of values provided:
Une seule valeur
Two values
Three values
Four valuesborder-width:5px 1px; - border-width: medium;
Default value. Medium thickness (generally around 3 pixels).
border-width:medium; - border-width: thin;
Thin thickness (usually around 1 pixel).
border-width:thin; - border-width: thick;
Thick width (generally around 5 pixels).
border-width:thick; - border-width: initial; (
medium) border-width: inherit; border-width: revert; border-width: revert-layer; border-width: revert-rule; border-width: unset;Common values are presented on these pages:
initial,inherit,revert,revert-layer,revert-rule,unset.
Examples with the border-width property.
Special effect achieved with a border thickness that is different on the top
Animation of the border-width property.
The animation of the border-width property poses no problem and is very smooth.
Note that the border grows inward, meaning the dimensions of the element don’t change. The system behaves this way because the box-sizing property
has been set to border-box.
Access the border-width property via a program
Change the border thickness in JavaScript.
Two variants of JavaScript code can work: with the property name written in kebab-case, typical of CSS (a dash to separate words),
or in camel-case notation, more common in JavaScript (a capital letter to separate words).
let el = document.getElementById('id');
el.style['border-width'] = '1mm';
// or
let el = document.getElementById('id');
el.style.borderWidth = '1mm';
Read the border thickness in JavaScript.
The following code example retrieves the value of border-width if it has been set directly on the element itself, via its HTML
style attribute, and not in the style sheet through a CSS selector.
let el = document.getElementById('id');
let value = el.style['border-width'];
// or
let el = document.getElementById('id');
let value = el.style.borderWidth;
Read the computed value of border-width in Javascript.
The computed value is the one that comes from evaluating the relative units (especially the percentage) and resolving the inheritance cascade.
If this logic doesn't give any value, the computed value will be the initial value of the property (medium in the case of border-width).
The thickness is always returned in pixels, even if it was set using another unit, or with one of the keywords thin, thick,
or medium.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('border-width');
With JQuery, read or change the value of border-width.
// Read the value:
$('#id').prop('border-width');
// Write the value:
$('#id').prop('border-width', '1mm');
$('#id').prop('{border-width': '1mm'});
Read the computed value of the property border-width with JQuery.
Just like in JavaScript, the value is returned in pixels.
let value = $('#id').css('border-width');
Other code examples.
Other examples of Javascript and JQuery code are given on the page Javascript and CSS.
Test it yourself.
The second button lets you see how the value of border-width is stored (serialized). All units are converted into pixels, with a quirk: if thickness
is requested in a number of pixels, the result on the computed value won’t exactly match what was requested. It’s the same across all browsers.
We haven’t found any information about this.
Simulator.
Browsers compatibility with border-width.
As we can see in the compatibility table below, the property border-width doesn't cause any issues with current browsers, both for physical
properties and logical properties.
border-top-width, border-left-width, etc. Physical properties do not take into account the characteristics of the language (direction an writing mode).border-block-start-style, border-inline-end-style, etc. These properties adapt to the writing mode of the language.border-width(physical properties)
border-width(logical properties)
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
KaiOS Browser
Opéra Mobile
Opéra
Firefox pour Androïd
Samsung Internet
Chrome
Edge
Firefox
Androïd Brower
Chrome pour Androïd
Baidu Browser
QQ Browser
Safari
Safari sur IOS
UC Browser pour Androïd
Opéra mini
Historic of the border-width property.
The shorthand property border-width and the corresponding detailed properties haven't changed across the different versions of CSS.
-
Cascading Style Sheets specification - Version 1
This first level of the CSS specification describes the mechanism of cascading style sheets. Authors and readers can add styles to documents. Mainly intended for formatting HTML documents, CSS allows defining colors, fonts, text formatting, spacing (margins), etc. The CSS language is easy to understand, readable, and easy to write; it uses common terms from desktop publishing.
Regardingborder-widthInitial definition of theborder-widthshorthand property and detailed properties for each edge.
November 17, 1995Working Draft.
November 12, 1996Proposed for recommendation.
December 17, 1996Recommendation .
September 13, 2018Old specification, declared obsolete. -
Cascading Style Sheets Level 2 - Revision 1 Specification
This level 2 of the specification describes the mechanism of cascading styles in CSS. This language is used to format HTML or XML documents. It supports media-specific style sheets so that authors can adapt the presentation of their documents for visual browsers, auditory devices, printers, braille devices, portable devices, etc.
Regardingborder-widthNo change to theborder-width...properties except that they accept theinheritvalue.November 04, 1997Working Draft.March 24, 1998Proposed for recommendation.May 11, 1998Recommendation . -
CSS Logical Properties and Values Level 1
This specification module defines properties that indirectly define certain other properties depending on the writing mode: left to right, right to left, or top to bottom. They are useful in simple and generic style sheets, such as browser style sheets, but can also save a few lines of styles for documents containing both left-to-right and right-to-left text.
Regardingborder-widthIntroducing logical properties (supporting language-dependent writing mode) for setting border thicknesses.May 18, 2017Working Draft.
-
CSS Backgrounds and Borders Module Level 3
Level 3 of the specification also explains how to position the background relative to the background area, and how to crop it.
Regarding borders, the concept of image borders is introduced, as well as the ideas of rounded corners and box shadows.Regardingborder-widthNo change toborder-width...properties.August 02, 2002Working Draft.December 17, 2009Candidate Recommendation.
See also, about the borders.
The properties related to backgrounds and borders are described in the W3C specification "CSS Backgrounds and Borders Module".
Properties:
