Can I have different colored left and top borders in CSS with straight join?
.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>
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 :(...
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>