Skip to content

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 an outline for a brief time to draw the user's attention to it.

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

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

Syntax

outline: [<COLOR>] [<BORDER VALUE>];
outline-top: [<COLOR>] [<BORDER VALUE>];
outline-right: [<COLOR>] [<BORDER VALUE>];
outline-bottom: [<COLOR>] [<BORDER VALUE>];
outline-left: [<COLOR>] [<BORDER VALUE>];

Values

Border value Description
"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.

Example

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

from textual.app import App
from textual.widgets import Static


TEXT = """I must not fear.
Fear is the mind-killer.
Fear is the little-death that brings total obliteration.
I will face my fear.
I will permit it to pass over me and through me.
And when it has gone past, I will turn the inner eye to see its path.
Where the fear has gone there will be nothing. Only I will remain."""


class OutlineApp(App):
    def compose(self):
        yield Static(TEXT)


app = OutlineApp(css_path="outline.css")
Screen {
    background: white;
    color: black;
}
Static {
    margin: 4 8;
    background: green 20%;
    outline: wide green;
}

OutlineApp ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ ear is the mind-killer. ear is the little-death that brings total obliteration.  will face my fear.  will permit it to pass over me and through me. nd when it has gone past, I will turn the inner eye to see its ath. here the fear has gone there will be nothing. Only I will  ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔

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)