Basics · Styling

Terminal CSS

The render target is a grid of cells, not a plane of pixels, and a few CSS properties map onto it in terminal-specific ways.

Borders are box-drawing characters. border takes a style keyword — single, double, rounded, heavy, or ascii — not the web’s width style color shorthand, so the colour is a separate border-color declaration. A bordered box can also carry a border-title, usually written as an attribute, which draws into the top edge: ┌─ Todo ───┐.

Opacity has two modes. opacity: dim sets the terminal’s dim attribute (SGR 2) — the right tool for muted hint text. A numeric opacity below 1 alpha-blends RGB colours over what’s behind them; with a palette colour that can’t be blended it falls back to dim. For a hint line, opacity: dim is what you want.

The starting panel has a plain single border and no title. Dress it up.

Your turn

Switch the border to rounded, give it a colour and a title, and dim the count line:

.panel {
    border: rounded;
    border-color: cyan;
    padding: 1 2;
}
.count {
    opacity: dim;
}

<div class="panel" border-title="Todo">

Press Run — the panel gets rounded cyan corners with a title in the top edge, and the count line reads dim.