← CSS Styling
Typography and visual design · 15 MIN

Borders, shadows and visual polish

Borders, shadows and visual polish

Borders define edges; border-radius softens corners; box-shadow creates visual depth. Use subtle, consistent effects rather than applying shadows everywhere. Focus indicators should remain visible and distinct from decorative shadows.

Try it yourself

Change the example, run it, and explain the result in your own words. Then create one variation of your own.

Key idea

Use the example as a starting point, not something to memorize. Practise, inspect the result and make small improvements.

Code example

.card { border: 1px solid #e5eaf0; border-radius: 1rem; box-shadow: 0 8px 24px rgb(20 40 70 / 8%); }