Can I have different colored left and top borders in CSS with straight join?

Question

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

• jsFiddle example highlighting diagonal connection

Screenshot

Answer 1

.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>

Answer 2

this should work but requires extra markup:

.outer {     border: 1px solid #E5E5E5;     border-left: 0; }  .inner {     border-left: 4px solid #F24495; } 

and

<div class="outer">     <div class="inner">         ...     </div> </div> 

Answer 3

If you wish to use the :before pseudo selector you need to set some content as well. See for example this jsfiddle with the following sample code:

<div>Container</div>

CSS:

div {
    border: 10px solid black;
    border-left-width: 0;
}
div::before {
    border: 10px solid orange;
    border-right-width: 0;
    content: '';
}

Displays as:

Edit
Hmm, although this should strictly answer the question, while trying to adapt my solution into the question's fiddle I find this doesn't play very well with paddings. Open to suggestions/edits/other answers that can handle that bit :(...