Border utilities include border, directional borders such as border-b, color utilities such as border-slate-200, and radius utilities such as rounded-lg or rounded-full. Rings are useful for emphasis and focus indicators because they draw an outline-like effect without changing the element's layout in the same way a border can.

Use a consistent radius scale. A large radius on every nested element can make a UI look overly soft; choose radii based on hierarchy, such as a larger page card and a smaller control inside it.

Shadows can communicate elevation, but too many strong shadows create visual noise. Use subtle shadows for cards and stronger elevation for overlays when it fits the design. Gradients use background utilities and can create emphasis, but text placed on a gradient still needs sufficient contrast across every part of the gradient.

Opacity modifies how an element or color is rendered. Applying opacity to a parent affects its descendants too; a translucent background color is often better when only the surface should be transparent.

Transforms such as scale-*, translate-*, and rotate-* can add subtle interaction feedback. Transforms generally do not change the normal document flow, so large movements may overlap neighboring content. Transition only the properties that need animation and keep durations short enough to feel responsive.

Respect reduced-motion preferences. Avoid making important information available only through animation, and provide a reduced-motion alternative for nonessential movement. For complex animations, CSS keyframes or an animation library may be more appropriate than stacking many utility classes.