Techie BabajiLearn to Code. Build Real Skills.
CSS · Box Model

Borders and Shadows

Borders, rounded corners and shadows turn flat boxes into cards, buttons and avatars. A few lines of CSS make a big visual difference.

Beginner 5 min Lesson 8 of 26 Runnable examples
Before you start:Margin and Padding
0/26 in CSS
On this page · 5 min · Beginner

On this page

  1. Learning objectives
  2. Explanation
  3. Syntax
  4. Code example
  5. Step by step
  6. Real-world use
  7. Common mistakes
  8. Best practices
  9. Remember this
  10. Practice exercise
  11. Mini quiz
  12. Related topics
  13. My notes
Reading time
5 min
Difficulty
Beginner
Updated
Oct 28, 2026

Related tutorials

Interview questions

Learning objectives#

  • Write border shorthand
  • Round corners and make circles with border-radius
  • Add depth with box-shadow
  • Know the difference between border and outline

Explanation#

border: width style color — for example border: 2px solid #ccc. Styles include solid, dashed, dotted and double. You can set one side only: border-bottom.

border-radius rounds corners. 8px gives a soft card; 50% on a square makes a circle; 999px makes a pill-shaped button.

box-shadow: x y blur spread color. 0 4px 12px rgb(0 0 0 / 15%) is a soft shadow below the box. Multiple shadows can be separated with commas.

outline looks like a border but takes up no space and does not affect layout. Browsers use it for keyboard focus rings.

Syntax#

CSS Illustrative
border: 1px solid #ddd;
border-radius: 12px;
box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
outline: 3px solid blue;

Code example: Card, avatar and buttons#

HTMLCard, avatar and buttons Runnable
<style>
  body { font-family: sans-serif; background: #f8fafc; padding: 20px; }
  .card {
    max-width: 260px; padding: 20px; background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 8px 24px rgb(0 0 0 / 8%);
  }
  .avatar { width: 64px; height: 64px; border-radius: 50%; border: 3px solid #2965f1; object-fit: cover; }
  .pill { padding: 8px 18px; border: 0; border-radius: 999px; background: #2965f1; color: white; }
  .ghost { padding: 8px 18px; border: 2px dashed #94a3b8; border-radius: 8px; background: none; }
  button:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  h3 { text-shadow: 0 1px 1px rgb(0 0 0 / 15%); }
</style>


<div class="card">
  <img class="avatar" src="https://i.pravatar.cc/128?img=12" alt="Profile photo of Rahul">
  <h3>Rahul Mehta</h3>
  <button class="pill">Follow</button>
  <button class="ghost">Message</button>
</div>
Expected output
A white rounded card with a soft shadow, a circular avatar with a blue ring, a pill-shaped button and a dashed outline button. Tab to see an orange focus ring.
Opens this example in the full playground

Step-by-step explanation#

  1. The card has a light border, rounded corners and two layered shadows for a natural look.
  2. border-radius: 50% turns the square avatar into a circle; object-fit: cover prevents stretching.
  3. border-radius: 999px makes a fully rounded pill.
  4. The ghost button uses a dashed border with no background.
  5. outline with outline-offset draws a focus ring away from the button without moving anything.

Real-world use case#

Almost every modern UI — product cards, profile pictures, chat bubbles, buttons — is built from border, border-radius and box-shadow.

Common mistakes#

Harsh shadows

box-shadow: 5px 5px black looks dated. Use larger blur, a small y offset and low-opacity colour.

Border changes the size

Adding a 2px border on hover makes the element grow and nudges its neighbours. Reserve the border (transparent) beforehand, or use outline or box-shadow.

Removing outlines

outline: none on buttons hides keyboard focus. Restyle it instead.

Best practices#

  • Keep one border-radius scale (e.g. 4px, 8px, 12px)
  • Use soft, layered shadows
  • Use outline for focus states
  • Use box-sizing: border-box so borders do not break widths

Remember this#

border = width style colour (“2px solid red”).

50% radius on a square = circle. 999px = pill.

Outline = border that takes no space — perfect for focus rings.

Practice exercise#

Your task: Create a 120px circular image with a 4px white border and a soft shadow.

Need a hint?
Width = height, border-radius: 50%, then border and box-shadow.
Show solution
CSS Illustrative
.round {
  width: 120px; height: 120px;
  border-radius: 50%;
  border: 4px solid white;
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.2);
  object-fit: cover;
}

Mini quiz#

Borders and Shadows quizMultiple choice Question 1 of 3

How do you make a square image a circle?

Score so far: 0/0

Want more? Practise all CSS MCQs · CSS interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.