Borders, Radius & Shadow

Definition: Borders outline a box, border-radius rounds its corners, and box-shadow adds depth. Together they turn a plain box into a polished "card".

The properties

border: 1px solid #ddd;
border-radius: 14px;
box-shadow: 0 6px 18px rgba(0,0,0,0.15);

Understanding each one

border: width style colour — e.g. 2px solid black
border-radius — bigger value = rounder corners (50% makes a circle)
box-shadow: x y blur colour — a soft drop shadow

These three properties appear on almost every modern web component.

💡 Tip: a subtle shadow (low opacity) looks far more professional than a heavy black one.

Try it Yourself

<style>
  .card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    padding: 24px;
    width: 220px;
    margin: 20px auto;
    text-align: center;
  }
</style>
<div class="card">A clean card with rounded corners and a soft shadow.</div>

Output

◀ The CSS Box Model Sizing & Display ▶