-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
123 lines (83 loc) · 3.58 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
---
title: border
slug: Web/CSS/border
page-type: css-shorthand-property
browser-compat: css.properties.border
---
{{CSSRef}}
The **`border`** [shorthand](/en-US/docs/Web/CSS/Shorthand_properties) [CSS](/en-US/docs/Web/CSS) property sets an element's border. It sets the values of {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, and {{Cssxref("border-color")}}.
{{EmbedInteractiveExample("pages/css/border.html")}}
## Constituent properties
This property is a shorthand for the following CSS properties:
- [`border-color`](/en-US/docs/Web/CSS/border-color)
- [`border-style`](/en-US/docs/Web/CSS/border-style)
- [`border-width`](/en-US/docs/Web/CSS/border-width)
## Syntax
```css
/* style */
border: solid;
/* width | style */
border: 2px dotted;
/* style | color */
border: outset #f33;
/* width | style | color */
border: medium dashed green;
/* Global values */
border: inherit;
border: initial;
border: revert;
border: revert-layer;
border: unset;
```
The `border` property may be specified using one, two, or three of the values listed below. The order of the values does not matter.
> **Note:** The border will be invisible if its style is not defined. This is because the style defaults to `none`.
### Values
- `<line-width>`
- : Sets the thickness of the border. Defaults to `medium` if absent. See {{Cssxref("border-width")}}.
- {{cssxref("<line-style>")}}
- : Sets the style of the border. Defaults to `none` if absent. See {{Cssxref("border-style")}}.
- {{cssxref("<color>")}}
- : Sets the color of the border. Defaults to `currentcolor` if absent. See {{Cssxref("border-color")}}.
## Description
As with all shorthand properties, any omitted sub-values will be set to their [initial value](/en-US/docs/Web/CSS/initial_value). Importantly, `border` cannot be used to specify a custom value for {{cssxref("border-image")}}, but instead sets it to its initial value, i.e., `none`.
The `border` shorthand is especially useful when you want all four borders to be the same. To make them different from each other, however, you can use the longhand {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, and {{Cssxref("border-color")}} properties, which accept different values for each side. Alternatively, you can target one border at a time with the physical (e.g., {{Cssxref("border-top")}} ) and logical (e.g., {{Cssxref("border-block-start")}}) border properties.
### Borders vs. outlines
Borders and [outlines](/en-US/docs/Web/CSS/outline) are very similar. However, outlines differ from borders in the following ways:
- Outlines never take up space, as they are drawn outside of an element's content.
- According to the spec, outlines don't have to be rectangular, although they usually are.
## Formal definition
{{cssinfo}}
## Formal syntax
{{csssyntax}}
## Examples
### Setting a pink outset border
#### HTML
```html
<div>I have a border, an outline, and a box shadow! Amazing, isn't it?</div>
```
#### CSS
```css
div {
border: 0.5rem outset pink;
outline: 0.5rem solid khaki;
box-shadow: 0 0 0 2rem skyblue;
border-radius: 12px;
font: bold 1rem sans-serif;
margin: 2rem;
padding: 1rem;
outline-offset: 0.5rem;
}
```
#### Result
{{EmbedLiveSample('Setting_a_pink_outset_border')}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- {{Cssxref("border-width")}}
- {{Cssxref("border-style")}}
- {{Cssxref("border-color")}}
- {{Cssxref("outline")}}
- [Backgrounds and borders](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders)
- [Learn CSS: Backgrounds and borders](/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)