mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
fec73ba0e1
* Docs for content-align, some bug fixes for it too * Make the example output a little clearer * Remove app.run() from content-align docs example * Improve wording * Move content-align and scrollbar-gutter docs exmaples to split css/py files * Remove app.run() from scrollbar-gutter docs example
2.3 KiB
2.3 KiB
Border
The border rule enables the drawing of a box around a widget. A border is set with a border value (see below) followed by a color.
| Border value | Explanation |
|---|---|
"ascii" |
A border with plus, hyphen, and vertical bar |
"blank" |
A blank border (reserves space for a border) |
"dashed" |
Dashed line border |
"double" |
Double lined border |
"heavy" |
Heavy border |
"hidden" |
Alias for "none" |
"hkey" |
Horizontal key-line border |
"inner" |
Thick solid border |
"none" |
Disabled border |
"outer" |
Think solid border with additional space around content |
"round" |
Rounded corners |
"solid" |
Solid border |
"tall" |
Solid border with extras space top and bottom |
"vkey" |
Vertical key-line border |
"wide" |
Solid border with additional space left and right |
For example heavy white would display a heavy white line around a widget.
Borders may also be set individually for the four edges of a widget with the border-top, border-right, border-bottom and border-left rules.
Border command
The textual CLI has a subcommand which will let you explore the various border types:
textual borders
Example
This examples shows three widgets with different border styles.
=== "border.py"
```python
--8<-- "docs/examples/styles/border.py"
```
=== "Output"
```{.textual path="docs/examples/styles/border.py"}
```
CSS
/* Set a heavy white border */
border: heavy white;
/* set a red border on the left */
border-left: outer red;
Python
# Set a heavy white border
widget.border = ("heavy", "white")
# Set a red border on the left
widget.border_left = ("outer", "red")