alihan/textual
1
0
Fork 0
mirror of https://github.com/Textualize/textual.git synced 2025-10-17 02:38:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

Update border rule reference.

Browse Source
This commit is contained in:
Rodrigo Girão Serrão
2022-12-21 21:37:40 +00:00
parent bc59c855b0
commit d82b21786a
1 changed files with 19 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
docs/styles/border.md
View File

@@ -1,42 +1,29 @@
# Border # Border
The `border` rule enables the drawing of a box around a widget. A border is set with a border type (see below) and a color. The `border` rule enables the drawing of a box 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.
## Syntax ## Syntax
``` --8<-- "docs/snippets/syntax_block_start.md"
border: [<BORDER TYPE>] [<COLOR>]; border: [<a href="../css_types/border.md">&lt;border&gt;</a>] [<a href="../css_types/color.md">&lt;color&gt;</a>];
border-top: [<BORDER TYPE>] [<COLOR>];
border-right: [<BORDER TYPE>] [<COLOR>];
border-bottom: [<BORDER TYPE>] [<COLOR>];
border-left: [<BORDER TYPE>] [<COLOR>];
```
### Border types border-top: [<a href="../css_types/border.md">&lt;border&gt;</a>] [<a href="../css_types/color.md">&lt;color&gt;</a>];
border-right: [<a href="../css_types/border.md">&lt;border&gt;</a>] [<a href="../css_types/color.md">&lt;color&gt;</a>];
border-bottom: [<a href="../css_types/border.md">&lt;border&gt;</a>] [<a href="../css_types/color.md">&lt;color&gt;</a>];
border-left: [<a href="../css_types/border.md">&lt;border&gt;</a>] [<a href="../css_types/color.md">&lt;color&gt;</a>];
--8<-- "docs/snippets/syntax_block_end.md"
| Border type | Description | The style `border` accepts an optional [`<border>`](../css_types/border.md) that sets the visual style of the widget border and an optional [`<color>`](../css_types/color.md) to set the color of the border.
|-------------|---------------------------------------------------------|
| `"ascii"` | A border with plus, hyphen, and vertical bar characters |
| `"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"` | 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.
### Color syntax ### Values
#### &lt;border&gt;
--8<-- "docs/snippets/type_syntax/border.md"
#### &lt;color&gt;
--8<-- "docs/snippets/type_syntax/color.md" --8<-- "docs/snippets/type_syntax/color.md"
@@ -58,8 +45,8 @@ The CSS snippet above will add a solid green border around `Static` widgets, exc
### Defaults ### Defaults
If a border color is specified but the border type is omitted, it defaults to solid. If `<color>` is specified but `<border>` is not, it defaults to `"solid"`.
If a border type is specified but the border color is omitted, it defaults to green (RGB color `"#00FF00"`). If `<border>` is specified but `<color>`is not, it defaults to green (RGB color `"#00FF00"`).
## Border command ## Border command