CODEWITHSUNDEEP
htmlcss
gg93
gg93

Reputation: 87

can I have two adjacent borders intersect each other?

the code is just a simple:

<div class="top" style="background:green";>
    <div class="inner" style="border: 1px solid white;"></div>
</div>

The inner div has a transparent background so you can only see the border once I define it. I'm trying to have the right and corner border of the inner div intersect, like so:

border-example

The goal is to have that intersection on all four corners.

Upvotes: 3

Views: 758

Answers (2)

Temani Afif
Temani Afif

Reputation: 272957

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;
}
<div class="box">

</div>

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;
}
<div class="box">
</div>
<div class="box" style="--c:20px;">
</div>
<div class="box" style="--c:0px;">
</div>
<div class="box" style="--c:40px;">
</div>

CSS border intersection

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;
}
<div class="box">
</div>
<div class="box" style="--c:20px;">
</div>
<div class="box" style="--c:0px;">
</div>
<div class="box" style="--c:40px;">
</div>

Upvotes: 5

BoltClock
BoltClock

Reputation: 723678

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;
}
<div class="top">
    <div class="inner"></div>
</div>

Upvotes: 3

Related Questions