Borders, radius, and focus rings

Borders use familiar pieces:

<div class="rounded-md border border-gray-300 p-4">...</div>

A border contributes to the box model; a radius clips the visual corner. Choose radius from the design language rather than adding rounded-* to every object. Adjacent controls may need coordinated corners instead of each looking like a separate pill.

Rings and outlines are especially useful for state that should sit outside the control without changing its layout. For interactive controls, keep a visible keyboard focus state:

<button class="rounded-md bg-blue-600 px-4 py-2 text-white
               focus-visible:outline-2 focus-visible:outline-offset-2
               focus-visible:outline-blue-600">
  Save
</button>

focus-visible normally avoids showing the custom indicator for pointer interactions while preserving it for keyboard-like focus. Do not remove the browser outline unless an equally clear replacement is present.

Check the indicator against every surface, including dark mode and error backgrounds. A two-pixel blue outline can disappear on a blue panel. Offset can create separation, while a contrasting outer ring or different color can make the state visible.

State cannot rely on color alone. An invalid input should have text or an icon connected with aria-describedby, not only a red border. Disabled controls need both a real disabled attribute and styling; opacity by itself does not prevent interaction.

Use DevTools to distinguish border, outline, and box-shadow-based ring rules. If a focus style is absent, first verify the element can receive focus and that the expected state variant matches.

Your action is to create a button and invalid input. Navigate with Tab in light and dark themes, zoom to 200%, and verify that focus and error states remain visible without relying only on color.