Hello all,

I would like to provide you a quick mixins to create diagonal (beveled) borders into CSS. In order to do so we use the linear-gradient value of the background property of two divs: a frame and a content.

SASS:

@mixin beveled-corners($border-color: "black",
                       $background-color: "white",
                       $border-width: "1px",
                       $border-radius: (5px, 5px, 5px, 5px),
                       $background-size: (50%, 50%)
                       ) {
  background: $border-color;
  padding: $border-width;
  background:
    linear-gradient(135deg, transparent nth($border-radius, 1), $border-color 0) top left,
    linear-gradient(225deg, transparent nth($border-radius, 2), $border-color 0) top right,
    linear-gradient(315deg, transparent nth($border-radius, 3), $border-color 0) bottom right,
    linear-gradient(45deg,  transparent nth($border-radius, 4), $border-color 0) bottom left;
  background-size: nth($background-size, 1);
  background-repeat: no-repeat;

  & > :first-child {
    background: $background-color;
    background:
      linear-gradient(135deg, transparent nth($border-radius, 1) * 0.95, $background-color 0) top left,
      linear-gradient(225deg, transparent nth($border-radius, 2) * 0.95, $background-color 0) top right,
      linear-gradient(315deg, transparent nth($border-radius, 3) * 0.95, $background-color 0) bottom right,
      linear-gradient(45deg,  transparent nth($border-radius, 4) * 0.95, $background-color 0) bottom left;
    background-size: nth($background-size, 2);
    background-repeat: no-repeat;
  }
}

// use it as follows:
.diagonal-borders {
  @include beveled-corners(red, white, 30px, (20px, 20px, 20px, 20px), (50%, 50%));
}

CSS: (with static values)

.diagonal-borders--frame {
    width: 12rem;
    background: red;
    padding: 30px;
    background: linear-gradient(135deg, transparent 20px, red 0) top left,
                linear-gradient(225deg, transparent 20px, red 0) top right,
                linear-gradient(315deg, transparent 20px, red 0) bottom right,
                linear-gradient(45deg, transparent 20px, red 0) bottom left;
    background-size: 50%;
    background-repeat: no-repeat;
}

.diagonal-borders--content {
    width: 100%;
    background: white;
    background: linear-gradient(135deg, transparent 19.5px, white 0) top left, linear-gradient(225deg, transparent 19.5px, white 0) top right, linear-gradient(315deg, transparent 19.5px, white 0) bottom right, linear-gradient(45deg, transparent 19.5px, white 0) bottom left;
    background-size: 50%;
    background-repeat: no-repeat;
}

There is a lot to discuss. To begin with you the linear-gradient property is compatible only since IE11 and you will find slightly different results on each browser.

Then the background-size value should be tuned differently. If you are planning to do a slim frame then a slightly higher value on the frame and the content could be necessary (50~55%). On huge borders (20px+) you won’t see a difference and it can be omitted to leave the 50% default value.
Finally I suggested a 0.95% reduction on the content size in order to have a more appropriate width on the frame border. This percentage should be risen for bigger borders.

You can see a live example here: https://jsfiddle.net/stuttufu/cr1vt5w5/1/

Hope it helped!