Как сделать бордюр квадратом по углам?

Question

Как сделать рамку квадратом на углах? И сломать одну из границ. Как на изображении.

Я сделал это с четырьмя дополнительными блоками, но я думаю, что есть способ получше. И я не знаю, как сломать внешнюю границу.

:root {
  --size: 8px;
  --r: -3px;
}

.wrapper {
  position: relative;
  border: 1px solid black;
  margin: 25px auto;
  padding: 2px;
  width: max-content;
}

.inner {
  padding: 15px 25px;
  border: 1px solid black;
}

.conner {
  position: absolute;
  height: var(--size);
  width: var(--size);
  background-color: black;
}

.bottom {
  bottom: var(--r);
}

.right {
  right: var(--r);
}

.top {
  top: var(--r);
}

.left {
  left: var(--r);
}

<div class="wrapper">
  <div class="inner">qwerty</div>
  <div class="conner top left"></div>
  <div class="conner top right"></div>
  <div class="conner bottom left"></div>
  <div class="conner bottom right"></div>
</div>

Answer 1

Вы можете использовать свойство border-image в CSS.

Выполните следующие действия:

1. Создайте изображение, как показано ниже:

примените border-image к .wrapper и укажите URL-адрес изображения. Подробнее о border-image: https://developer.mozilla.org/en-US/docs/Web/CSS/border-image

.wrapper {
  height: 160px;
  width: 250px;
  border-style: solid; 
  border-image: url(https://i.stack.imgur.com/2RoPg.png) 12 / 6 stretch;
  position: relative;
  box-sizing: border-box;
}

.inner {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;  
}

<div class="wrapper">
  <div class="inner">QWERTY</div>
</div>

Answer 2

Вот идея с множественным фоном и CSS переменными для простого управления всем:

.box {
  --s:20px; /* size of square */
  --w:calc(100% - 60px);  /* width of outer border*/
  --ot:3px; /* offset of outer border from outisde */
  --ob:5px; /* offset of inner border from inside */
  
  width:150px;
  height:120px;
  display:inline-block;
  margin:10px;
  border:var(--ot) solid transparent;
  background:
     /* squares */
     linear-gradient(#000,#000) top    left /var(--s) var(--s) border-box,
     linear-gradient(#000,#000) top    right/var(--s) var(--s) border-box,
     linear-gradient(#000,#000) bottom left /var(--s) var(--s) border-box,
     linear-gradient(#000,#000) bottom right/var(--s) var(--s) border-box,
     /*borders*/
     linear-gradient(#000,#000) top    /var(--w) 2px,
     linear-gradient(#000,#000) left   /2px var(--w),
     linear-gradient(#000,#000) bottom /var(--w) 2px,
     linear-gradient(#000,#000) right  /2px var(--w);
  background-repeat:no-repeat;
  position:relative;
  z-index:0;
}
.box::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:   calc(var(--s) - var(--ot) - var(--ob));
  left:  calc(var(--s) - var(--ot) - var(--ob));
  right: calc(var(--s) - var(--ot) - var(--ob));
  bottom:calc(var(--s) - var(--ot) - var(--ob));
  border:2px solid;
}

<div class="box"></div>

<div class="box" style="--w:calc(100% - 100px);--s:30px;--ob:10px"></div>

<div class="box" style="--w:80px;--s:15px;--ot:0px;--ob:0px"></div>

<div class="box" style="--w:100%;--s:15px;--ot:5px;--ob:0px"></div>

<div class="box" style="--w:calc(100% - 20px);--s:0px;--ot:5px;--ob:-15px"></div>

<div class="box" style="--w:calc(100% - 20px);--s:0px;--ot:5px;--ob:5px"></div>

<div class="box" style="--w:0;--s:20px;--ot:0px;--ob:10px"></div>

<div class="box" style="--w:calc(100% - 80px);--s:20px;--ot:10px;--ob:-40px"></div>