Outline

The outline rule enables the drawing of a box around the content of a widget, which means the outline is drawn over the content area.

!!! warning

Not to be confused with [`border`](./border.md).

Syntax

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

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

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

Unlike the style border, the frame of the outline is drawn over the content area of the widget. This rule can be useful for temporary emphasis of the content of a widget, if you want to draw the user's attention to it.

Values

<border>

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

<color>

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

Examples

This example shows a widget with an outline. Note how the outline occludes the text area.

=== "Output"

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

=== "outline.py"

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

=== "outline.css"

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

The next example makes the difference clearer, by having three labels side-by-side. They contain the same text, have the same width and height, and are styled exactly the same up to their outline and border rules. This example also shows that a widget can contain both a border and an outline:

=== "Output"

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

=== "outline_vs_border.py"

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

=== "outline_vs_border.css"

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

CSS

/* Set a heavy white outline */
outline:heavy white;

/* set a red outline on the left */
outline-left:outer red;

Python

# Set a heavy white outline
widget.outline = ("heavy", "white")

# Set a red outline on the left
widget.outline_left = ("outer", "red")

2.7 KiB Raw Blame History