CSS border-radius and box-shadow: Style a Simple Card

CSS can turn a plain block of content into a clear, friendly card. In this practical example, you will combine border-radius and box-shadow, test the result, and learn what each value controls.

If you are new to CSS, first read the CSS explanation on Playcode123.com. You can also copy examples from the CSS codes page and test them in the Playcode123 Sandbox.

What these properties do

border-radius rounds the corners of an element. A small value creates slightly rounded corners; a larger value makes them more curved.

box-shadow adds a shadow around an element. Its values describe the horizontal offset, vertical offset, blur, spread, and color.

border-radius: 18px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

Build a simple project card

Create a file named index.html, paste in the following code, save it, and open it in your browser.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Card Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f3f6fa;
      padding: 40px;
    }

    .project-card {
      width: 280px;
      padding: 24px;
      background-color: white;
      border: 1px solid #d8e0ea;
      border-radius: 18px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    .project-card h1 {
      margin-top: 0;
      font-size: 24px;
    }

    .project-card a {
      color: #0757a8;
    }
  </style>
</head>
<body>
  <article class="project-card">
    <h1>My first project</h1>
    <p>I built a small webpage with HTML and CSS.</p>
    <a href="#">View the project</a>
  </article>
</body>
</html>

Expected result

You should see a white card on a light background. The card has rounded corners and a soft shadow below it. The heading, paragraph, and link remain normal HTML; CSS only changes their appearance.

Understand the box-shadow values

box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  • 0: no horizontal movement.
  • 8px: move the shadow downward.
  • 20px: blur the edge of the shadow.
  • rgba(..., 0.15): use a transparent black color.

You can add a fourth length value to control the spread:

box-shadow: 0 8px 20px 2px rgba(0, 0, 0, 0.15);

Try these changes

  1. Change border-radius: 18px to 4px.
  2. Change it again to 40px.
  3. Change the shadow to 0 2px 6px rgba(0, 0, 0, 0.25).
  4. Add border-radius: 50% to a square element and observe how it becomes a circle.

Common mistakes

  • Forgetting a unit: write 18px, not 18. Zero is the exception.
  • Missing the semicolon: end each CSS declaration with ;.
  • Using the wrong selector: .project-card selects an element with class="project-card".
  • Making the shadow too dark: use a low alpha value such as 0.15 for a softer result.
  • Expecting border-radius to show on an invisible element: give the element a background color, border, or visible content.

Exercise: create your own profile card

Change the example into a profile card. Add a name, a short description, and a link. Choose your own background color, corner radius, and shadow. Then remove the shadow temporarily so you can compare both versions.

Check your work: the page should load without errors, the corners should be rounded, and the shadow should appear outside the card. If nothing changes, save the file, refresh the browser, and check the selector and spelling.