textual/docs/styles/outline.md

Outline

The outline rule enables the drawing of a box around a widget. Similar to border, but unlike border, outline will draw over the content area. This rule can be useful for emphasis if you want to display a outline for a brief time to draw the user's attention to it.

An outline is set with a border style (see below) followed by a color.

• "ascii"
• "round"
• "solid"
• "double"
• "dashed"
• "heavy"
• "inner"
• "outer"
• "hkey"
• "vkey"
• "tall"
• "wide"

For examples heavy white would display a heavy white line around a widget.

Outlines may also be set individually with the outline-top, outline-right, outline-bottom and outline-left rules.

Example

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

=== "outline.py"

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

=== "Output"

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

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)