Why does my border not show up?

Most often the border style is missing. The default style is none, so write a style such as solid or dashed along with the width and colour.

What is the difference between border and outline?

A border is part of the element and adds to its size. An outline is drawn outside the element, takes no space and is mainly used to show keyboard focus.

How do I make a perfect circle in CSS?

Give the element the same width and height, then set border-radius: 50%. This works for images and for divs.

Can I add more than one shadow to an element?

Yes. Separate the shadows with commas in box-shadow or text-shadow. The first shadow in the list is drawn on top.

CSS Borders, border-radius and box-shadow

Why Borders and Shadows Matter: A Handicrafts Shop

Meera has started a small online shop called Hasthkala Crafts. She sells blue pottery from Jaipur, Madhubani paintings from Bihar and wooden toys from Channapatna, all made by artisans she knows personally. Her first web page has all the right photos and prices, but everything looks flat. The products blend into the page and nothing says “pick me up”.

Think of a real craft fair. Each artisan displays their work on a separate table with a cloth on it, maybe a wooden frame around a painting. Those edges help your eyes see where one product ends and the next begins. On a web page, borders, rounded corners and shadows do this job.

In this lesson you will turn Meera’s flat list into neat product cards. You will learn borders and their sides, border-radius for rounded cards, circles and pills, the difference between outline and border, and how to make soft, realistic shadows.

The examples use padding, which adds space inside an element. You will learn it properly in the CSS Box Model lesson.

The border Property

A border needs three things: a width (how thick), a style (what kind of line) and a colour. You can write them as three properties, or in one line with the border shorthand:

border: 2px solid #8b4513; means 2 pixels thick, a solid line, brown colour.

The style is the part beginners forget, and it is the one that matters most: without a style there is no border at all. Common styles are solid, dashed, dotted, double and none.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Border Styles</title>
  <style>
    p { padding: 10px; font-family: Arial, sans-serif; }
    .solid  { border: 2px solid #8b4513; }
    .dashed { border: 2px dashed #8b4513; }
    .dotted { border: 3px dotted #8b4513; }
    .double { border: 5px double #8b4513; }
    .long {
      border-width: 4px;
      border-style: solid;
      border-color: #2e7d32;
    }
  </style>
</head>
<body>
  <p class="solid">solid: the everyday border</p>
  <p class="dashed">dashed: looks like a coupon you can cut</p>
  <p class="dotted">dotted: light and playful</p>
  <p class="double">double: two thin lines, like an old frame</p>
  <p class="long">Written as three separate properties</p>
</body>
</html>

One side at a time

You do not have to put a border on all four sides. border-top, border-right, border-bottom and border-left each take the same three values. Designers use single sides a lot: a line under a heading, a coloured strip on the left of a note, or thin lines above and below a price.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Border Sides</title>
  <style>
    body { font-family: Arial, sans-serif; }
    h2 {
      border-bottom: 3px solid #d2691e;
      padding-bottom: 6px;
    }
    .note {
      border-left: 6px solid #f4b400;
      background-color: #fff8e1;
      padding: 12px;
    }
    .price {
      border-top: 1px solid #cccccc;
      border-bottom: 1px solid #cccccc;
      padding: 8px 0;
    }
  </style>
</head>
<body>
  <h2>Channapatna Wooden Toys</h2>
  <p class="note">Each toy is painted with natural, child-safe colours.</p>
  <p class="price">Price: Rs 450</p>
</body>
</html>

To remove one side from a full border, write the full border first and then override one side, for example border-top: none;.

border-radius: Rounded Corners

border-radius rounds the corners of an element. A bigger value means a rounder corner. It works even when the element has no border, because it also rounds the background. Three shapes cover most designs:

Shape	Code	Where you see it
Rounded card	`border-radius: 12px;`	Product cards, message boxes
Circle	`border-radius: 50%;` on a square	Profile photos, avatars
Pill	`border-radius: 999px;`	Tags, badges, buttons

A circle needs equal width and height. On a rectangle, 50% gives an oval. The pill trick uses a very large number: the browser limits the rounding to half the height, so the ends become perfect half circles.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Rounded Corners</title>
  <style>
    body { font-family: Arial, sans-serif; }
    .card {
      width: 220px;
      padding: 16px;
      border: 1px solid #dddddd;
      border-radius: 12px;
    }
    .avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      border: 3px solid #d2691e;
    }
    .pill {
      padding: 4px 12px;
      border-radius: 999px;
      background-color: #e8f5e9;
      color: #2e7d32;
    }
    .leaf { width: 80px; height: 80px; background-color: #a5d6a7; border-radius: 0 40px; }
  </style>
</head>
<body>
  <div class="card">
    <img class="avatar" src="https://picsum.photos/seed/artisan/160/160" alt="Photo of the artisan">
    <p>Made by Lakshmi, Kutch</p>
    <span class="pill">Handmade</span>
  </div>
  <p>Two values make a leaf shape:</p>
  <div class="leaf"></div>
</body>
</html>

You can also give each corner its own value. With two values, the first rounds the top left and bottom right corners, and the second rounds the other two. That is how the leaf shape above works.

Outline vs Border

An outline looks like a border, but it behaves differently:

A border is part of the element’s size. Adding a 6px border makes the box 12px wider and can push other things around.
An outline is drawn outside the element, on top of the page. It takes no space and moves nothing.
outline-offset adds a gap between the element and its outline.

Browsers use outlines to show keyboard focus: the ring you see when you press Tab to move between links and buttons. People who cannot use a mouse depend on that ring.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Outline vs Border</title>
  <style>
    body { font-family: Arial, sans-serif; }
    .box { width: 200px; padding: 10px; background-color: #ffe0b2; margin-bottom: 20px; }
    .with-border  { border: 6px solid #e65100; }
    .with-outline { outline: 6px solid #e65100; }
    button { padding: 10px 18px; font-size: 16px; }
    button:focus { outline: 3px solid #1565c0; outline-offset: 3px; }
  </style>
</head>
<body>
  <div class="box">No border</div>
  <div class="box with-border">Border: the box got bigger</div>
  <div class="box with-outline">Outline: same size, drawn outside</div>
  <button>Click me, then press Tab</button>
</body>
</html>

Never remove focus outlines without a replacement. Writing outline: none on buttons makes your site hard to use with a keyboard. If you do not like the default ring, style your own, as in the example above.

box-shadow: Lifting Things off the Page

A shadow makes an element look like it floats a little above the page, just like a card lying on a table. box-shadow takes up to five values:

box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);

Horizontal offset (0): positive moves the shadow right, negative moves it left.
Vertical offset (4px): positive moves it down. Light usually comes from above, so shadows usually go down.
Blur (12px): 0 gives a sharp edge, bigger values give a softer edge.
Spread (0, optional): makes the shadow bigger or smaller before blurring.
Colour: use a transparent black with rgba(), so the shadow mixes with any background.

Add the word inset at the start and the shadow goes inside the element, so it looks pressed in.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Box Shadow Parts</title>
  <style>
    body { font-family: Arial, sans-serif; background-color: #f5f5f5; padding: 20px; }
    .box {
      width: 220px;
      padding: 16px;
      margin-bottom: 28px;
      background-color: #ffffff;
    }
    .hard   { box-shadow: 6px 6px 0 #333333; }
    .blur   { box-shadow: 6px 6px 15px #999999; }
    .spread { box-shadow: 0 0 0 4px #ffcc80; }
    .soft   { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
    .inset  { box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3); }
  </style>
</head>
<body>
  <div class="box hard">6px 6px 0: a sharp shadow</div>
  <div class="box blur">6px 6px 15px: blurred</div>
  <div class="box spread">0 0 0 4px: spread only, like a ring</div>
  <div class="box soft">0 4px 12px rgba: soft and modern</div>
  <div class="box inset">inset: pressed into the page</div>
</body>
</html>

Layered soft shadows and text-shadow

Real shadows are not one flat shape. There is a dark, sharp shadow close to the object and a light, wide one further away. You can copy this by listing two shadows separated by a comma. This one trick makes cards look much more professional.

text-shadow works the same way for text, but takes only offset, blur and colour (no spread, no inset). A light text shadow can help white text stand out on a coloured or busy background.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Layered Shadows and Text Shadow</title>
  <style>
    body { font-family: Arial, sans-serif; background-color: #faf7f2; padding: 24px; }
    .card {
      width: 240px;
      padding: 20px;
      background-color: #ffffff;
      border-radius: 12px;
      box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.08),
        0 8px 24px rgba(0, 0, 0, 0.10);
    }
    .title {
      font-size: 36px;
      color: #ffffff;
      background-color: #bf5b04;
      padding: 12px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }
  </style>
</head>
<body>
  <div class="card">Two soft shadows: a close one and a far one.</div>
  <p class="title">Festive Collection</p>
</body>
</html>

Keep shadows subtle. If people notice the shadow before the product, it is too strong. Use low alpha values (0.05 to 0.2) and avoid pure black. Heavy, dark shadows make a page look old and messy.

Real-Life Example: Hasthkala Crafts Product Cards

Here are Meera’s new product cards. Each card uses a thin border, rounded corners and a layered soft shadow. The region tag is a pill, the heading has a single bottom border, and the button has its own focus outline. overflow: hidden clips the photo so it follows the rounded top corners. You will learn it in the Width, Height, max-width and Overflow lesson.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hasthkala Crafts: Products</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #faf6f0;
      padding: 20px;
      color: #3e2723;
    }
    h2 { border-bottom: 3px solid #d2691e; padding-bottom: 8px; }
    .card {
      max-width: 280px;
      margin-bottom: 24px;
      background-color: #ffffff;
      border: 1px solid #eee3d6;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 18px rgba(0, 0, 0, 0.08);
    }
    .card img { width: 100%; display: block; }
    .info { padding: 14px 16px; }
    .info h3 { margin: 6px 0; }
    .badge {
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 13px;
      background-color: #fff3e0;
      border: 1px solid #ffcc80;
    }
    .price { font-weight: bold; color: #bf360c; }
    .buy {
      padding: 10px 18px;
      font-size: 15px;
      color: #ffffff;
      background-color: #bf360c;
      border: none;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(191, 54, 12, 0.3);
    }
    .buy:focus { outline: 3px solid #1565c0; outline-offset: 2px; }
  </style>
</head>
<body>
  <h2>Hasthkala Crafts</h2>
  <div class="card">
    <img src="https://picsum.photos/seed/pottery/560/320" alt="Blue pottery vase">
    <div class="info">
      <span class="badge">Jaipur</span>
      <h3>Blue Pottery Vase</h3>
      <p class="price">Rs 899</p>
      <button class="buy">Add to cart</button>
    </div>
  </div>
  <div class="card">
    <img src="https://picsum.photos/seed/madhubani/560/320" alt="Madhubani painting">
    <div class="info">
      <span class="badge">Bihar</span>
      <h3>Madhubani Painting</h3>
      <p class="price">Rs 1,250</p>
      <button class="buy">Add to cart</button>
    </div>
  </div>
</body>
</html>

Try these changes, one at a time:

Change the card’s border-radius to 0, then to 30px. Which feels right for a handicrafts shop?
Remove the second shadow from the card and compare. Then try rgba(0, 0, 0, 0.6) and see how a heavy shadow looks.
Remove overflow: hidden and look closely at the top corners of the photo.

Common Mistakes (and How to Fix Them)

No border style. border: 2px #8b4513; shows nothing, because the default style is none. Always include solid, dashed or another style.
A circle that turns into an oval. border-radius: 50% needs equal width and height. Set both to the same value.
Shadows that are too dark. box-shadow: 5px 5px 10px black looks heavy. Use a small vertical offset and a transparent colour.
Removing outlines. outline: none hides keyboard focus. Replace it with your own visible style.

Here is the missing style mistake. Run it, and the card has no border:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Missing Border Style</title>
  <style>
    .card { padding: 16px; border: 2px #8b4513; }
  </style>
</head>
<body>
  <div class="card">Where is my border?</div>
</body>
</html>

Add the word solid and the border appears:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Border Style Added</title>
  <style>
    .card { padding: 16px; border: 2px solid #8b4513; }
  </style>
</head>
<body>
  <div class="card">Here is my border!</div>
</body>
</html>

Practice Task: An Artisan Profile Card

Meera wants to introduce the artisans behind her products. Build a profile card for Ramesh, a silk weaver from Varanasi, by completing the four TODO steps.

The card has rounded corners and a soft layered shadow
The photo is a circle with a border
The skill tag is a pill
The quote has a coloured border on the left side only

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Artisan Profile</title>
  <style>
    body { font-family: Arial, sans-serif; background-color: #f4f1ec; padding: 20px; }
    .profile {
      max-width: 280px;
      padding: 20px;
      background-color: #ffffff;
      text-align: center;
      /* TODO 1: Round the corners (12px) and add a soft layered shadow */
    }
    .photo {
      width: 96px;
      height: 96px;
      /* TODO 2: Make the photo a circle with a 3px solid border */
    }
    .skill {
      padding: 4px 12px;
      background-color: #e8f5e9;
      /* TODO 3: Make this a pill shape */
    }
    .quote {
      padding-left: 12px;
      text-align: left;
      /* TODO 4: Add a 4px solid border on the left side only */
    }
  </style>
</head>
<body>
  <div class="profile">
    <img class="photo" src="https://picsum.photos/seed/weaver/200/200" alt="Ramesh at his loom">
    <h3>Ramesh, Varanasi</h3>
    <span class="skill">Silk weaving</span>
    <p class="quote">My family has woven Banarasi sarees for four generations.</p>
  </div>
</body>
</html>

Show one possible answer (try it yourself first!)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Artisan Profile</title>
  <style>
    body { font-family: Arial, sans-serif; background-color: #f4f1ec; padding: 20px; }
    .profile {
      max-width: 280px;
      padding: 20px;
      background-color: #ffffff;
      text-align: center;
      border-radius: 12px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.08);
    }
    .photo {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      border: 3px solid #d2691e;
    }
    .skill {
      padding: 4px 12px;
      background-color: #e8f5e9;
      border-radius: 999px;
    }
    .quote {
      padding-left: 12px;
      text-align: left;
      border-left: 4px solid #d2691e;
    }
  </style>
</head>
<body>
  <div class="profile">
    <img class="photo" src="https://picsum.photos/seed/weaver/200/200" alt="Ramesh at his loom">
    <h3>Ramesh, Varanasi</h3>
    <span class="skill">Silk weaving</span>
    <p class="quote">My family has woven Banarasi sarees for four generations.</p>
  </div>
</body>
</html>

Key Takeaways

border needs a width, a style and a colour. Without a style, there is no border.
Use single sides like border-left and border-bottom for accents and dividers.
border-radius makes rounded cards (12px), circles (50% on a square) and pills (999px).
An outline takes no space. Browsers use it for keyboard focus, so never remove it without a replacement.
box-shadow takes offsets, blur, spread and colour. Layer two soft shadows and keep them subtle.

Borders, Rounded Corners and Shadows