Partial Borders in CSS

•

Have you ever wanted to create a border in CSS that only extends across part of an element? It's possible by applying margins, but that can get messy when you want your content to extend beyond its border. Here's a handy technique that uses box shadows to achieve the same result.

Untitled.png

How It's Done

Typically, when using a border to separate elements in a list, you would do something like this:

li {
  border-bottom: 1px solid #ddd;
}

li:last-of-type {
  border-bottom-width: 0;
}

You can achieve the same effect by using box shadows instead.

li {
  box-shadow: inset 0 -1px 0 0 #ddd;
}

li:last-of-type {
  box-shadow: none;
}

Untitled.png

One nifty aspect of box shadows is that CSS allows you to use more than one of them. You can take advantage of this by stacking two shadows on top of your content.

li {
  box-shadow: inset 20px 0 0 0 #ee003e,
              inset -20px 0 0 0 #ee003e,
              inset 0 -1px 0 0 #ddd;
}

Untitled.png

Finally, all you have to do is set the top shadows to be the same color as the background and you're done!

li {
  box-shadow: inset 20px 0 0 0 white,
              inset -20px 0 0 0 white,
              inset 0 -1px 0 0 #ddd;
}

Untitled.png