can I have two adjacent borders intersect each other?

Question

the code is just a simple:

    

&         


        
      

Answer 1

You can use linear-gradient and you only need one element:

.box {
  margin:30px;
  width:100px;
  height:100px;
  padding:10px;
  background:
   linear-gradient(#fff,#fff) 10px 0,
   linear-gradient(#fff,#fff) 0 10px,
   linear-gradient(#fff,#fff) calc(100% - 10px) 0,
   linear-gradient(#fff,#fff) 0 calc(100% - 10px);
   
 background-size:1px 100%,100% 1px;
 background-repeat:no-repeat;
}

body {
 background:green;
}

You can also rely on CSS variable to easily control the intersection:

.box {
  margin:20px;
  width:100px;
  height:100px;
  padding:var(--c,10px);
  background:
   linear-gradient(#fff,#fff) var(--c,10px) 0,
   linear-gradient(#fff,#fff) 0 var(--c,10px),
   linear-gradient(#fff,#fff) calc(100% - var(--c,10px)) 0,
   linear-gradient(#fff,#fff) 0 calc(100% - var(--c,10px));
   
 background-size:1px 100%,100% 1px;
 background-repeat:no-repeat;
 
 display:inline-block;
 box-sizing:border-box;
}

body {
 background:green;
}

Same logic with a different syntax:

.box {
  margin:20px;
  width:100px;
  height:100px;
  padding:var(--c,10px);
  background:
   linear-gradient(#fff,#fff) left,
   linear-gradient(#fff,#fff) top,
   linear-gradient(#fff,#fff) right,
   linear-gradient(#fff,#fff) bottom;
   
 background-size:1px 100vh,100vw 1px;
 background-origin:content-box;
 background-repeat:no-repeat;
 
 display:inline-block;
 box-sizing:border-box;
}

body {
 background:green;
}