Outline on only one border

html

responsive-design

css-preprocessors

box-shadow

byAnton Shumikhin·Dec 11, 2024

To float a single-side outline, harness the power of ::before or ::after pseudo-elements in CSS. Below is a lean code snippet for a right-side outline:

.element::after {
  /* Just a thin yet stylish "black tie" for our element*/
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; /* Secret coordinates to borderland */
  width: 2px; /* Width aka "How thick do you want your outline?" */
  background: #000; /* And the color is...Ta-da! Black! */
}
.element { position: relative; /* Because every parent should relate to their pseudo children ;) */}

Position your outline to your desired side by adjusting the top, bottom, or both width and height values.

box-shadow: the border's secret agent

At times, you may find the border property a tad stiff. Enter the box-shadow, a more dexterous substitute. Watch it put on an impressive performance of a single-side outline with the use of inset keyword and some stacked shadows:

.element {
  /* "Red shadow, you're my undercover inset agent on top. Go!" */
  box-shadow: inset 0 10px 0 0 rgba(255, 0, 0, 0.5);
}

There's no need to dread shadows, they won't bite into your box model size, which means you can add or subtract outlines to your heart's content without any layout disruptions.

Pseudo-elements, assemble!

Pseudo-elements can do more than just "appear" on the scene. The ::before pseudo-element can create a custom top border:

.element::before {
  /* "I'm just a line, standing in the top, asking you to color me blue." */
  content: '';
  display: block;
  height: 2px;
  background-color: blue; 
  margin-top: -2px; /* Nothing to see here, just a standard top align */
}
.element { position: relative; /* Parents got to parent */}

Don't forget to make room for the ::before or ::after elements to strut their stuff at the block-level stage.

Padding and colors: best friends of your borders

Increase the appeal of your borders with thoughtful adjustments of padding and background. You can also streamline color management with variables in CSS preprocessors such as Sass or Less.

Your border's journey to exceptionality

The 3D flirt

Tweak box-shadow spreads and colors to create a realistic 3D illusion:

.element {
  /* 'Houston, we need more depth' — 'Roger that, more depth incoming' */
  box-shadow: inset 0 0 10px 1px #444;
}

The power of focus

You're never fully dressed without a :focus style:

.input:focus {
  /* 'On focus, I wear my beautiful blue outline, Voila!' */
  box-shadow: 0 0 0 3px #0078d7 inset;
}

Embrace the transparency

Do the unexpected: paint your borders transparent, and let outlines take center stage:

.element {
  /* 'Going transparent, wish me luck!' */
  border: 2px solid transparent;
}
.element:focus {
  /* 'Focus and BAM! I turned blue!' */
  box-shadow: 0 0 0 2px #0078d7;
}