A border occupies space in the box model; an outline is painted outside the border edge and does not take layout space. Border-radius rounds the border box's corners.
Make this comfortable
CSS border, radius, and outline: separate box edges from focus indication
When to use it
A refund action has a quiet border at rest and a strong outline when keyboard focus reaches it. The border makes the control legible against the panel; the outline is a state indicator that should remain visible after a theme changes. Do not remove the browser's outline and replace it with only a subtle shadow. Outline-offset can move the indicator away from the border, but a clipped ancestor may still cut it off. The sample pairs the outline with a color that needs contrast review against the actual page surface. Border-radius affects appearance, not the control's accessible name or click target. Inspect a button near the edge of a scrollable container and one inside a dialog.
.refund-action { border: 1px solid #41637c; border-radius: .5rem; padding: .7rem 1rem; background: #fff; color: #173148; }
.refund-action:focus-visible { outline: 3px solid #175b44; outline-offset: 3px; }Cost and verification
The outline adds negligible paint work. Borders can alter the space available to content under content-box sizing, so keep the component's box-sizing explicit when dimensions are tight. A 3-pixel focus ring can be clipped if its ancestor has overflow hidden; test the whole container, not just the button. In forced colors, browser-provided focus colors may differ, so verify that an indicator remains. A decorative radius does not reduce the need for enough padding around the action's text and a usable pointer target.
Common Mistakes
- Do not remove focus outlines without an equally visible replacement.
- Do not use a shadow as the only focus state.
- Do not assume border-radius changes hit testing or semantics.
Connected lessons
css
reference
web