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
|
# Border
The `border` style enables the drawing of a box around a widget.
A border style may also be applied to individual edges with `border-top`, `border-right`, `border-bottom`, and `border-left`.
!!! note
[`border`](./border.md) and [`outline`](./outline.md) cannot coexist in the same edge of a widget.
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
border: [<a href="../../css_types/border"><border></a>] [<a href="../../css_types/color"><color></a>] [<a href="../../css_types/percentage"><percentage></a>];
border-top: [<a href="../../css_types/border"><border></a>] [<a href="../../css_types/color"><color></a>] [<a href="../../css_types/percentage"><percentage></a>];
border-right: [<a href="../../css_types/border"><border></a>] [<a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>]];
border-bottom: [<a href="../../css_types/border"><border></a>] [<a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>]];
border-left: [<a href="../../css_types/border"><border></a>] [<a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>]];
--8<-- "docs/snippets/syntax_block_end.md"
In CSS, the border is set with a [border style](./border.md) and a color. Both are optional. An optional percentage may be added to blend the border with the background color.
In Python, the border is set with a tuple of [border style](./border.md) and a color.
## Border command
The `textual` CLI has a subcommand which will let you explore the various border types interactively:
```
textual borders
```
Alternatively, you can see the examples below.
## Examples
### Basic usage
This examples shows three widgets with different border styles.
=== "Output"
```{.textual path="docs/examples/styles/border.py"}
```
=== "border.py"
```python
--8<-- "docs/examples/styles/border.py"
```
=== "border.tcss"
```css hl_lines="4 10 16"
--8<-- "docs/examples/styles/border.tcss"
```
### All border types
The next example shows a grid with all the available border types.
=== "Output"
```{.textual path="docs/examples/styles/border_all.py"}
```
=== "border_all.py"
```py
--8<-- "docs/examples/styles/border_all.py"
```
=== "border_all.tcss"
```css
--8<-- "docs/examples/styles/border_all.tcss"
```
### Borders and outlines
--8<-- "docs/snippets/border_vs_outline_example.md"
## CSS
```css
/* Set a heavy white border */
border: heavy white;
/* Set a red border on the left */
border-left: outer red;
/* Set a rounded orange border, 50% opacity. */
border: round orange 50%;
```
## Python
```python
# Set a heavy white border
widget.styles.border = ("heavy", "white")
# Set a red border on the left
widget.styles.border_left = ("outer", "red")
```
## See also
- [`box-sizing`](./box_sizing.md) to specify how to account for the border in a widget's dimensions.
- [`outline`](./outline.md) to add an outline around the content of a widget.
--8<-- "docs/snippets/see_also_border.md"
|
