border
Shorthand that sets the width, style, and color of a border.
- Initial value
medium none currentcolor- Inherited
- No
- Animatable
- yes, width and color
- Applies to
- all elements
- JavaScript
element.style.border = "2px solid #a78bfa"
Example
#.input {
border: 1px solid #525252;
border-radius: 8px;
}
.input:focus {
border-color: #a78bfa;
}<input class="input" placeholder="Click to change the border color" style="padding: 8px 12px; width: 100%; outline: none; background: #111;">Definition and usage
#The border property combines three properties: border-width, border-style, and border-color. You can list the values in any order, for example border: 2px solid #a78bfa.
The style matters most. Without it, no border appears, because the default style is none. If you skip the color, the border takes on the text color (currentcolor).
The shorthand sets all four edges at once. For a single edge, use border-top, border-right, border-bottom, and border-left, handy for things like underlines and separators.
Syntax
#border: <width> || <style> || <color>;Values
#- A thin, solid, gray line. The most common choice for cards and fields.
- A thicker dashed line.
- A double line. It needs at least 3px of width to be visible.
- No border.
Values in practice
#1px solid #525252
.demo { border: 1px solid #525252; }3px dashed #f59e0b
.demo { border: 3px dashed #f59e0b; }6px double #a78bfa
.demo { border: 6px double #a78bfa; }none
.demo { border: none; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- A border changes an element’s size. If it only appears on hover and causes a layout shift, set a fixed,
transparentborder up front. - For a border that doesn’t affect layout, use
outlineorbox-shadowinstead.
Related entries
#- border vs outlineborder is part of the box model and enlarges the element, while outline draws a ring outside it, with no effect on the page layout or size.
- border-widthSets the thickness of a border.
- border-styleSets the border line style: solid, dashed, dotted, and more.
- border-colorSets the color of a border.
- border-radiusRounds the corners of an element.
- outlineDraws an outline around an element that doesn’t take up space in the layout.
- border-imageReplaces a plain border with an image or gradient sliced into corners and edges.
Spotted a mistake or missing an example? Write to us.