Border

A border is the line that sits around an element. It marks the edge of a button, card, input, image, or panel so the shape is easier to see.

Borders can be subtle or strong. Thin low-contrast borders separate quiet surfaces. Dark or colored borders create stronger emphasis and can make an element feel selected or active.

In the box model, border sits between paddingPaddinglayoutSpace inside an element, between its edge and its content. and marginMarginlayoutSpace outside an element, between it and its neighbors.. Padding is inside the border; margin is outside it.