Choosing borders and shadows in Figma

A stroke, drop shadow, and inner shadow can all show an edge in Figma. They behave differently in CSS.

Border or stroke

Figma can place a stroke inside, on the center, or outside a shape. CSS borders do not have this setting.

With content-box, a 1px border increases the final size. With border-box, the border stays inside the declared size. It reduces the inner space instead. A different box model can make spacing look one or two pixels off.

Use a border when the boundary has meaning. The handoff should include the border width and the box model.

Drop shadow

A drop shadow does not change layout size. It works well when a card rises on hover.

It can be clipped by a parent with overflow: hidden. Blur also makes the edge less exact than a border.

Inner shadow

An inner shadow stays inside the surface. It does not change the outer size, and a parent cannot clip it.

Use it when exact outer size matters. It is only a visual edge. Do not use it instead of a clear focus state or a strong boundary.

A practical default

1. Structural boundary → Border
Use a 1px border with border-box. This is the clearest default.

2. Exact outer size or clipped parent → Inner shadow
Use an inner shadow when the edge must stay inside the component.

3. Elevation or hover feedback → Drop shadow
Use a drop shadow to show depth. Check the parent for clipping. Do not use the shadow as the only boundary.