Border - CSS Property
This page is also about physical property(ies):
And the logical properties:
Summary of characteristics of the border property
Per grammar: serialization in the order of syntax. {enter-free]Syntax diagram of border.
border 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 numeric value followed by one of CSS dimension units.coloris a color expressed in any of the syntaxes recognized by CSS (see Colors).
Description of the border property.
A border is defined by three properties: thickness, line style, and line color. These settings can be applied globally to all four sides, or they can be customized individually for each side (top, right, bottom, and left). This explains the large number of border-related properties, but they are just combinations of the three basic parameters and the four sides.
The border property sets the three parameters (thickness, style, and color) for all four sides of the element.
But the many shorthand properties are often useful. border also resets the border-image property.
Summary properties grouping the values of the three parameters for one of the sides:
border-topborder-rightborder-bottomborder-leftSummary properties grouping the values of a parameter for all four sides:
border-widthborder-styleborder-colorFinally, the long hand properties, to set one of the parameters for one of the sides:
border-top-width
border-right-width
border-bottom-width
border-left-width
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top-color
border-right-color
border-bottom-color
border-left-color
For more information on the possible values with border, refer to the properties border-width, border-style, and border-color.
Warning! The border defined by border can be hidden if an image border is defined afterward or with a higher priority (see border-image ).
Don't confuse borders and outlines. Refer to the description of the CSS property outline for a detailed presentation of the differences between
borders and outlines.
Features of the short hand properties.
The fact that shorthand properties define all the values they involve, even if some aren't specified, can lead to surprising but explainable results. This behavior is common to all shorthand properties, not just those related to borders, but it's especially noticeable with borders because we mainly use shorthand properties for them.
border-color:red;
border:2px solid;
The color set by
border-color is reset by the property border that follows: even though the color isn't specified, it goes back
to its initial value.
border:2px solid red;
border-top:6px double;
This second example is even more surprising: the red color is reset by
border-top, while the developer probably thought they were only changing
the thickness and style of the line.
Language support.
The properties border-top, border-right, border-bottom, border-left, as well as their variations
for each of the border parameters, can be replaced by their logical equivalent if you want the borders to adapt to the language of the text.
The logical properties are as follows, along with their correspondence to the physical properties in the case of Latin languages:
| Logical properties | Physical properties equivalents for Latin |
|---|---|
border-block-start-widthborder-inline-end-widthborder-block-end-widthborder-inline-start-width |
border-top-widthborder-right-widthborder-bottom-widthborder-left-width |
border-block-start-styleborder-inline-end-styleborder-block-end-styleborder-inline-start-style |
border-top-styleborder-right-styleborder-bottom-styleborder-left-style |
border-block-start-colorborder-inline-end-colorborder-block-end-colorborder-inline-start-color |
border-top-colorborder-right-colorborder-bottom-colorborder-left-color |
border-block-startborder-inline-endborder-block-endborder-inline-start> |
border-topborder-rightborder-bottomborder-left |
border-block-widthborder-inline-width |
|
border-block-styleborder-inline-style |
|
border-block-colorborder-inline-color |
But most of the time, we'll just stick to the summarized properties that group the parameters for one of the edges. They are shown in the diagram below.
border-topborder-leftborder-rightborder-bottomValues for border.
- border: none;
Default value. No border is drawn around the element. If an image border is set, it is also canceled.
- border: solid;
Minimal syntax: a border is drawn, with the default thickness (
medium) and the default color (currentColor).To find out the different types of line styles, refer to the
border-styleproperty. - border: 2px solid green;
Full syntax, describing the border's thickness, its type, and its color.
- border: initial; border: inherit; border: revert; border: revert-layer; border: revert-rule; border: unset;
These values are described in more detail on their respective page:
initial,inherit,revert,revert-layer,revert-rule,unset.
Examples with the border property.
ridge). For the 3D effect to show properly, make sure
to have a sufficient thickness (usually 5 pixels), and a medium brightness color (gray in this case).
groove) and rounded corners (see border-radius).
3D borders are not easy to render with rounded corners: you can notice imperfections in the rounding at the top right and bottom left.
| 25 | 18 | 14 |
| 8 | 18 | 0 |
| 40 | 0 | 27 |
Border on the left and right only, with rounded corners. Applied to a table, this border makes it easy to present a matrix just like it's usually shown in math.
Access the border property via a program
With Javascript, change the value of border.
In JavaScript, here's how to set a border. JavaScript accepts two syntaxes: the first with an array-like notation, the second with an object-like notation.
let el = document.getElementById('id');
el.style['border'] = '1px solid blue';
// or
let el = document.getElementById('id');
el.style.border = '1px solid blue';
With Javascript, read the value of border.
The property must have been applied directly to the element itself via its style attribute, not through a CSS selector.
let el = document.getElementById('id');
let value = el.style['border'];
// or
let el = document.getElementById('id');
let value = el.style.border;
With Javascript, read the computed value of border.
Refer to the individual properties to see how each of the values accepted by border is stored.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('border');
With JQuery, read or change the value of border.
JQuery offers the same possibilities as Javascript to read or write the value of border, with a more compact syntax.
// Read the value:
$('#id').prop('border');
// Write the value:
$('#id').prop('border', '1px solid blue');
$('#id').prop('{border': '1px solid blue'});
With JQuery, read the computed value of border.
let value = $('#id').css('border');
Other code example.
Other examples of Javascript and JQuery code are given on the page Javascript and CSS.
Test it yourself.
The buttons below apply the entered value to the border property and then show either the value as it was applied or the computed value.
This second option lets you see how the value of border is stored (serialized). You’ll also notice that if you try to set an incorrect value
(like a non-existent color, for example), all the values are ignored and the computed value is reset to the property's initial value.
Browsers compatibility with border.
No compatibility issues: borders have been properly handled by browsers for a long time.
border, which defines all parameters of a border.borderproperty
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
KaiOS Browser
Opéra Mobile
Chrome
Edge
Opéra
Safari
Safari sur IOS
Androïd Brower
Chrome pour Androïd
Firefox pour Androïd
Samsung Internet
Firefox
Baidu Browser
QQ Browser
UC Browser pour Androïd
Opéra mini
Historic of the border property.
-
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.
RegardingborderInitial definition of border-related properties and thebordershorthand property.
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.
RegardingborderNo change to the properties defining the borders, 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.
RegardingborderIntroduction of logical properties to define borders. These properties depend on the writing mode of the language used.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.RegardingborderNo change directly to border-related properties, but longhand properties now have a logical equivalent (supporting language-dependent writing mode).August 02, 2002Working Draft.December 17, 2009Candidate Recommendation.
See also, about the borders.
The descriptions of properties related to backgrounds and borders are gathered in the W3C specification "CSS Backgrounds and Borders Module".
Properties: