Skip to content

Border-subtitle-align

The border-subtitle-align style sets the horizontal alignment for the border subtitle.

Syntax

border-subtitle-align: <horizontal>;

The border-subtitle-align style takes a <horizontal> that determines where the border subtitle is aligned along the top edge of the border. This means that the border corners are always visible.

Default

The default alignment is right.

Examples

Basic usage

This example shows three labels, each with a different border subtitle alignment:

BorderSubtitleAlignApp ┌────────────────────────────────────────────────────────────────────────────┐ ││ │My subtitle is on the left.│ ││ └─ < Left ───────────────────────────────────────────────────────────────────┘ ┏╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍┓ ╏╏ ╏My subtitle is centered╏ ╏╏ ┗╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍ Centered! ╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍┛ ▊▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▎ ▊▎ ▊My subtitle is on the right▎ ▊▎ ▊▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ Right > ▁▎ 

from textual.app import App
from textual.widgets import Label


class BorderSubtitleAlignApp(App):
    CSS_PATH = "border_subtitle_align.tcss"

    def compose(self):
        lbl = Label("My subtitle is on the left.", id="label1")
        lbl.border_subtitle = "< Left"
        yield lbl

        lbl = Label("My subtitle is centered", id="label2")