CODEWITHSUNDEEP
csscss-shapes
user123
user123

Reputation: 443

Custom/irregular border radius using css

Is there a way to create this kind of border radius? its like the opposite of the normal border-radius, I cant figure out how to make that one. I search on related questions here, but cant find one.

Hope you help me.

thanks

Irregular border radius or curve

Upvotes: 0

Views: 549

Answers (1)

Temani Afif
Temani Afif

Reputation: 272937

I would do it like this:

body {
 background:pink;
}
.box {
 margin:40px;
 height:80px;
 border:3px solid #000;
 border-bottom:none;
 border-radius:20px 20px 0 0;
 position:relative;
}
.box:before {
  content:"";
  position:absolute;
  bottom:-20px;
  left:-20px;
  right:-20px;
  border-bottom:3px solid #000;
}
.box:after {
  content:"";
  position:absolute;
  left:-20px;
  right:-20px;
  top:100%;
  height:20px;
  background:
    radial-gradient(circle at top right, transparent 60%,#000 61.5%,#000 72%,transparent 74%) top right/20px 100% no-repeat,
    radial-gradient(circle at top left,  transparent 60%,#000 61.5%,#000 72%,transparent 74%) top left/20px 100% no-repeat;
}
<div class="box">

</div>

You can add more control with CSS variable:

body {
 background:pink;
}
.box {
 margin:var(--r,20px);
 height:80px;
 border:3px solid #000;
 border-bottom:none;
 border-radius:var(--r,20px) var(--r,20px) 0 0;
 position:relative;
}
.box:before {
  content:"";
  position:absolute;
  bottom:calc(-1 * var(--r,20px));
  left:calc(-1 * var(--r,20px));
  right:calc(-1 * var(--r,20px));
  border-bottom:3px solid #000;
}
.box:after {
  content:"";
  position:absolute;
  left:calc(-1 * var(--r,20px));
  right:calc(-1 * var(--r,20px));
  top:100%;
  height:var(--r,20px);
  background:
    radial-gradient(circle at top right, transparent calc(71% - 3px),#000 calc(71% - 2px),#000 71%,transparent 73%) top right,
    radial-gradient(circle at top left,  transparent calc(71% - 3px),#000 calc(71% - 2px),#000 71%,transparent 73%) top left;
   background-size:var(--r,20px) 100%;
   background-repeat:no-repeat;
}
<div class="box">

</div>
<div class="box" style="--r:50px">

</div>
<div class="box" style="--r:80px">

</div>

Upvotes: 4

Related Questions