Skip to content

Border

The border rule enables the drawing of a box around a widget. A border is set with a border value (see below) followed by a color.

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

border: [<COLOR>] [<BORDER VALUE>];
border-top: [<COLOR>] [<BORDER VALUE>];
border-right: [<COLOR>] [<BORDER VALUE>];
border-bottom: [<COLOR>] [<BORDER VALUE>];
border-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.

Border command

The textual CLI has a subcommand which will let you explore the various border types:

textual borders

Example

This examples shows three widgets with different border styles.

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


class BorderApp(App):
    def compose(self):
        yield Static("My border is solid red", id="static1")
        yield Static("My border is dashed green", id="static2")
        yield Static("My border is tall blue", id="static3")


app = BorderApp(css_path="border.css")
Screen {
    background: white;
}
Screen > Static {
    height: 5;
    content-align: center middle;
    color: white;
    margin: 1;
    box-sizing: border-box;
}    
#static1 {
    background: red 20%;
    color: red;
    border: solid red;
}
#static2 {
    background: green 20%;
    color: green;
    border: dashed green;
}
#static3 {
    background: blue 20%;
    color: blue;
    border: tall blue;
}

BorderApp ┌────────────────────────────────────────────────────────────────────────────┐ My border is solid red └────────────────────────────────────────────────────────────────────────────┘ ┏╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍┓ My border is dashed green ┗╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍┛ ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ My border is tall blue ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁

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")