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

by

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

More Related Contents:

  1. what does "/" mean in css border-radius property? [duplicate]
  2. How to remove focus border (outline) around text/input boxes? (Chrome) [duplicate]
  3. Border Gradient with Border Radius
  4. How to remove the border highlight on an input text element
  5. How can I show only corner borders?
  6. Any way to declare a size/partial border to a box?
  7. CSS triangle custom border color
  8. Invert rounded corner in CSS?
  9. CSS Property Border-Color Not Working
  10. Control the dashed border stroke length and distance between strokes
  11. CSS: Margin-top when parent’s got no border
  12. Hover effect : expand bottom border
  13. How to create multi-color border with CSS?
  14. How does border-image work with linear-gradient?
  15. Should I use ‘border: none’ or ‘border: 0’?
  16. Borders not shown in Firefox with border-collapse on table, position: relative on tbody, or background-color on cell
  17. What is the difference between outline and border CSS properties?
  18. CSS border less than 1px [duplicate]
  19. Two color borders
  20. How to create multiple borders around existing border of circle [duplicate]
  21. How to reset / remove chrome’s input highlighting / focus border? [duplicate]
  22. Removing the image border in Chrome/IE9
  23. CSS hover border makes elements adjust slightly
  24. Creating space between an element and its border
  25. text flowing out of div
  26. Combining border-top,border-right,border-left,border-bottom in CSS
  27. Drawing border colors during a CSS transition
  28. input type=”image” shows unwanted border in Chrome and broken link in IE7
  29. Inner border over images with CSS?
  30. Using CSS to make table’s outer border color different from cells’ border color

Leave a Comment