Borders

Set border style, colour, opacity, width, radius, and hover states

Borders draw an outline around a component and can also round its corners. The shared control supports Static borders and animated Start/End states.

Type

Type is not responsive and normally defaults to None.

• None — Applies no border classes.
• Static — Applies one border style.
• Hover — Reveals Start and End states.

Input-style controls use a specialised border that defaults to Static.

State

State appears for Hover and defaults to Start.

• Start — The resting border.
• End — The border shown while the component itself is hovered.

Unlike Effects, Filters, and Transforms, the shared Borders control does not provide a separate Hover Over target.

Style

Style defaults to Solid.

• Solid — Draws one continuous line.
• Dashed — Draws a sequence of dashes.
• Dotted — Draws a sequence of dots.

Colour and Opacity

Color uses Theme Studio colours and normally defaults to Surface 500.

Opacity ranges from 0–100% and defaults to 100%.

Width

Width controls Top, Right, Bottom, and Left border thickness. Link opposite sides for symmetrical borders or set them independently.

The general and Container variants default to 0 on every side. Input borders use the Theme Default width in their initial Static state.

Radius

Radius controls the four corners. Link corners for one radius or set them independently.

The general variant defaults to the Theme Default radius. Container and Input variants default to None.

A radius can clip a visible background only when the component’s overflow and rendering structure support it. If child content extends outside rounded corners, set Layout → Overflow to Hidden.

Hover Borders

Configure Start and End, then add a Transition. Select Colors or Most Common to animate colour; width and radius animation may require All.

Border UI in Elements

Border controls support separate sides, corners, and hover states.