-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
103 lines (70 loc) · 2.91 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
---
title: border-block
slug: Web/CSS/border-block
page-type: css-shorthand-property
browser-compat: css.properties.border-block
---
{{CSSRef}}
The **`border-block`** [CSS](/en-US/docs/Web/CSS) property is a [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) for setting the individual logical block border property values in a single place in the style sheet.
{{EmbedInteractiveExample("pages/css/border-block.html")}}
`border-block` can be used to set the values for one or more of {{cssxref("border-block-width")}}, {{cssxref("border-block-style")}}, and {{cssxref("border-block-color")}} setting both the start and end in the block dimension at once. The physical borders to which it maps depends on the element's writing mode, directionality, and text orientation. It corresponds to the {{cssxref("border-top")}} and {{cssxref("border-bottom")}} or {{cssxref("border-right")}}, and {{cssxref("border-left")}} properties depending on the values defined for {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.
The borders in the other dimension can be set with {{cssxref("border-inline")}}, which sets {{cssxref("border-inline-start")}}, and {{cssxref("border-inline-end")}}.
## Constituent properties
This property is a shorthand for the following CSS properties:
- [`border-block-color`](/en-US/docs/Web/CSS/border-block-color)
- [`border-block-style`](/en-US/docs/Web/CSS/border-block-style)
- [`border-block-width`](/en-US/docs/Web/CSS/border-block-width)
## Syntax
```css
border-block: 1px;
border-block: 2px dotted;
border-block: medium dashed blue;
/* Global values */
border-block: inherit;
border-block: initial;
border-block: revert;
border-block: revert-layer;
border-block: unset;
```
### Values
The `border-block` is specified with one or more of the following, in any order:
- `<'border-width'>`
- : The width of the border. See {{cssxref("border-width")}}.
- `<'border-style'>`
- : The line style of the border. See {{cssxref("border-style")}}.
- {{CSSXref("<color>")}}
- : The color of the border.
## Formal definition
{{CSSInfo}}
## Formal syntax
{{csssyntax}}
## Examples
### Border with vertical text
#### HTML
```html
<div>
<p class="exampleText">Example text</p>
</div>
```
#### CSS
```css
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-rl;
border-block: 5px dashed blue;
}
```
#### Results
{{EmbedLiveSample("Border_with_vertical_text", 140, 140)}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- [CSS Logical Properties and Values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values)
- This property maps to one of the physical border properties: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, or {{cssxref("border-left")}}.
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}