Add Rounded Borders To Selected Corners Of An Element

How could I go about constructing something like this with pure CSS? This is how far I've gotten so far: Fiddle I'm struggling with how to get that rounded corner there, even if I

Solution 1:

you can achieve that by using pseudo elements ::before/::after in .box using the properties border and border-radius

body {
  background: #000;
}
.container {
  width: 300px;
  height: 150px;
  margin: 3% auto 0/* changed for demo */
}
h3 {
  color: white;
}
.box {
  width: 100%;
  height: 100%;
  background: red;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.box::before,
.box::after {
  content: "";
  position: absolute;
  border: solid white;
  width: 50px;
  height: 50px;
}
.box::before {
  top: -15px;
  left: -15px;
  border-radius: 15px0; /* top-left */border-width: 5px005px;
}
.box::after {
  bottom: -15px;
  right: -15px;
  border-radius: 0015px; /* bottom-right */border-width: 05px5px0;
}

<divclass="container"><divclass="box"><h3>Content</h3></div></div>

Solution 2:

Using pseudo-elements would be the ideal solution.

This answer is just an alternative. Although not semantically elegant, it's crudely effective.

• Create a container with four divs.
• The first div will be the white border.
• The last div will be your red box.
• The two divs in the middle will be used to conceal areas of the white border.

The HTML is quite simple:

<divclass="container"><divclass="box box1"></div><divclass="box box2"></div><divclass="box box3"></div><divclass="box box4"><h3>Content</h3></div></div>

With absolute positioning, .box2 (green) and .box3 (blue) can be moved to cover the border.

The order of the boxes in the source doesn't really matter. But with the HTML above there is no need for the z-index property.

Now, the only thing left is to change the background color of boxes 2 and 3 to black.

Full code:

body {
  margin: 0;
  height: 100vh;
  background-color: black;
  display: flex;
}
.container {
  position: relative;
  width: 300px;
  height: 150px;
  margin: auto;
}
.box {
  position: absolute;
  width: 300px;
  height: 150px;
  border-radius: 15px;
}
.box1 {
  border: 5px solid white;
  width: 320px;
  height: 170px;
  top: -14px;
  left: -15px;
}
.box2 {
  background-color: black;
  top: -30px;
  left: 30px;
}
.box3 {
  background-color: black;
  top: 30px;
  left: -30px;
}
.box4 {
  background-color: red;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

<divclass="container"><divclass="box box1"></div><divclass="box box2"></div><divclass="box box3"></div><divclass="box box4"><h3>Content</h3></div></div>