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;
b         


        

Answer 1

Background

By default CSS uses miter joints (45° angles) for all borders joints. Hence, to achieve square joints (90° angles) for any border, you can either use (1) inner box-shadow, (2) pseudo-elements or (3) background-image and multiple linear-gradients.

Let's assume you have the following element that you want to style:

Option 1: square joints using box-shadow

div {
  /* downside of using box-shadow, you need to add the   */
  /* inner border size to the padding on top of any      */
  /* additional padding you might want                   */
  padding: 20px;
  /* by changing the order of your box-shadows, you      */
  /* can modify which borders overlap each other         */
  box-shadow:
    /* left "inner border" */
    inset 20px 0 0 0 red,
    /* right "inner border" */
    inset -20px 0 0 0 grey,
    /* top "inner border" */
    inset 0 20px 0 0 grey,
    /* bottom "inner border" */
    inset 0 -20px 0 0 grey;
}

• View on JSFiddle
• Browser support for box-shadow

Option 2: square joints pseudo-elements

div {
  border: 20px solid grey;
}

div::before {
  position: absolute;
  background-color: red;
  content: "";
  width: 20px;
  /* we need to add the height of the top and bottom    */
  /* border to the pseudo-elements' height as the       */
  /* inset border is not included in the height of the  */
  /* div even when "box-sizing: border-box" is set.     */
  height: calc(100% + 20px + 20px);
  top: -20px;
  left: -20px;
}

• View on JSFiddle
• Browser support for pseudo-elements

Option 3: square joints using background-image and multiple linear-gradients

div {
  /* downside of using multiple linear-gradients, you   */
  /* need to add the inner border size to the padding   */
  /* on top of any additional padding you might want    */
  padding: calc(20px + 10px);
  background-image: 
    /* left "inner border" */
    linear-gradient(to right, red 20px, transparent 20px),
    /* right "inner border" */
    linear-gradient(to left, grey 20px, transparent 20px),
    /* top "inner border" */
    linear-gradient(grey 20px, transparent 20px),
    /* bottom "inner border" */
    linear-gradient(to top, grey 20px, transparent 20px);
}

• View on JSFiddle
• Browser support for background-images()
• Browser support for linear-gradient()