textual/docs/styles/border.md

Border

The border rule enables the drawing of a box around a widget.

Syntax

--8<-- "docs/snippets/syntax_block_start.md" border: [<border>] [<color>];

border-top: [<border>] [<color>]; border-right: [<border>] [<color>]; border-bottom: [<border>] [<color>]; border-left: [<border>] [<color>]; --8<-- "docs/snippets/syntax_block_end.md"

The style border accepts an optional <border> that sets the visual style of the widget border and an optional <color> to set the color of the border.

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.

Values

<border>

--8<-- "docs/snippets/type_syntax/border.md"

<color>

--8<-- "docs/snippets/type_syntax/color.md"

Multiple edge rules

If multiple border rules target the same edge, the last rule that targets a specific edge is the one that is applied to that edge. For example, consider the CSS below:

Static {
    border-top: dashed red;
    border: solid green;  /* overrides the border-top rule above */
    /* Change the border but just for the bottom edge: */
    border-bottom: double blue;
}

The CSS snippet above will add a solid green border around Static widgets, except for the bottom edge, which will be double blue.

Defaults

If <color> is specified but <border> is not, it defaults to "solid". If <border> is specified but <color>is not, it defaults to green (RGB color "#00FF00").

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

This examples shows three widgets with different border styles.

=== "border.py"

```python
--8<-- "docs/examples/styles/border.py"
```

=== "border.css"

```css
--8<-- "docs/examples/styles/border.css"
```

=== "Output"

```{.textual path="docs/examples/styles/border.py"}
```

The next example shows a grid with all the available border types.

=== "border_all.py"

```py
--8<-- "docs/examples/styles/border_all.py"
```

=== "border_all.css"

```css
--8<-- "docs/examples/styles/border_all.css"
```

=== "Output"

```{.textual path="docs/examples/styles/border_all.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")