# Straight border on rounded box?

I’m not sure what the name of this visual design pattern is, but here are 2 ways to do it using CSS.

# With a pseudo-element

    .box1:before {
      content: "";
      position: absolute;
      left: -10px;
      top: 0;
      height: 100%;
      width: 10px;
      background: #FF1493;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
    }

# With a gradient background

    .box2 {
      border-radius: 10px;
      background-image: linear-gradient(
        to right,
        #00BFFF 10px,
        white 11px
      );
      padding-left: 35px;
    }