htmlcssrounded-cornerscorner-detection

How to remove some part of borders from the corners?


I want to remove the corners of borders like this picture.

What I need to draw


Solution

  • You can use ::before and ::after pseudo elements to cover (and thus, "hide") parts of the border:

    .bordery {
      border: 1px solid teal;
      padding: 20px;
      position: relative;
    }
    .bordery::after,
    .bordery::before {
      background-color: white;
      content: "";
      display: block;
      height: 10px;
      position: absolute;
      width: 10px;
    }
    .bordery::after {
      bottom: -1px;
      right: -1px;
    }
    .bordery::before {
      top: -1px;
      left: -1px;
    }
    <div class="bordery">This is just some sample content.</div>