can I have two adjacent borders intersect each other?

Question

the code is just a simple:

    

&         


        
      

Answer 1

If you can add ::before and ::after pseudo-elements to the inner div, you can have one generate the top and bottom borders and the other generate the left and right borders. Then offset them so that their borders start and end outside the area of the inner div. Not the most elegant solution as it requires the inner div to be positioned, but it works pretty well.

Note that the borders will extend outside of the inner div's area without causing it to be shifted away from its static position, which I'm assuming is the goal here. If you want the div to be constricted, give it positive margins equal to the offset of the borders (so borders with -2px offsets mean giving your inner div 2px margins).

body {
  background: green;
}

.top {
  width: 200px;
  height: 200px;
}

.inner {
  position: relative;
  height: 100%; /* To simulate content */
}

.inner::before, .inner::after {
  content: '';
  position: absolute;
  border: solid white;
}

.inner::before {
  top: 0;
  right: -2px;
  bottom: 0;
  left: -2px;
  border-width: 1px 0;
}

.inner::after {
  top: -2px;
  right: 0;
  bottom: -2px;
  left: 0;
  border-width: 0 1px;
}