How to make border with square on corners?

user_7523969 0
Viewed 952

How to make border with square on corners? And break one of the borders. Like on the image.

enter image description here

I did it with four additional blocks but I guess there might be a better way. And I don't know how to break outer border.

: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>

css-shapes css html
2 Answers

You can use border-image property in CSS.

Follow these steps:

  1. Create an image as below:

border image

  1. apply border-image on .wrapper and provide the image url. Read more about 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>

user_42869910

Here is an idea with multiple background and CSS variables to easily control everything:

.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;
  --_g: linear-gradient(#000 0 0);
  background:
     /* squares */
     var(--_g) top    left /var(--s) var(--s) border-box,
     var(--_g) top    right/var(--s) var(--s) border-box,
     var(--_g) bottom left /var(--s) var(--s) border-box,
     var(--_g) bottom right/var(--s) var(--s) border-box,
     /*borders*/
     var(--_g) top    /var(--w) 2px,
     var(--_g) left   /2px var(--w),
     var(--_g) bottom /var(--w) 2px,
     var(--_g) right  /2px var(--w);
  background-repeat:no-repeat;
  position:relative;
  z-index:0;
}
.box::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 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>

CSS border with square corner and cutted edges

user_86203330
Related