Home/ Questions/Q 8091759
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T20:08:18+00:00

I would like to have a border that is 4px thick pink on the

  • 0

I would like to have a border that is 4px thick pink on the left and 1px grey elsewhere:

border: 1px solid #E5E5E5;
border-left: 4px solid #F24495;

The issue is the join is diagonal so I get a horrible overlay. I tried:

.item:before{ 
  border-left: 4px solid #F24495;
}

But no luck.

jsFiddle Example

Screenshot

Screenshot

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    .item::before was the right approach, but it needs a bit of work past a single border-left property. You’ll need to make the pseudo element visible (display: block; content: "";), position the pseudo element on the left side of .item, and stretch it to line up with the top and bottom borders properly.

    While this can be done manually, I highly recommend using CSS Variables (or variables in your preprocessor) since it makes updating the widths of borders less error-prone and painful.

    .item {
  display: inline-block;
  padding: 0.2em 0.3em;
  background: #f8f8f8;
  color: #454545;

  /* Set border widths with variables */
  --top-border-width: 4px;
  --bottom-border-width: var(--top-border-width);
  --left-border-width: 16px;
  --right-border-width: var(--top-border-width);

  /* Set border styles for each side */
  border-top: var(--top-border-width) solid #e4e4e4;
  border-bottom: var(--bottom-border-width) solid #e4e4e4;
  border-right: var(--right-border-width) solid #e4e4e4;

  /* Remove the left border and add blank space where the border should be placed */
  border-left: 0;
  margin-left: var(--left-border-width);

  /* Contain the ::before */
  position: relative;
}

.item::before {
  /* Give the pseudo element substance */
  display: block;
  content: "";

  /* Add a left border with a straight edge */
  border-left: var(--left-border-width) solid #f84995;

  /* Position pseudo element's border where the normal border would have been placed */
  position: absolute;
  top: calc(0px - var(--top-border-width));
  bottom: calc(0px - var(--bottom-border-width));
  left: calc(0px - var(--left-border-width));
}
    <h1 class="item">Gen.2</h1>
    • 0