Border of rectangle with curved side

Question

I have a shape that looks like this

It is a rectangle with a circle behind it. I need to do a border all around it.

I tried to do a border for the rectangle and a curved line for the curved part (based on this). It doesn't seem to be precise enough. The curved line don't align 100% with the circle part. I need precision.
Putting the same shape a bit bigger behind it does not work for what I need.

.template {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.rectangle {
  background: red;
  width: 91mm;
  height: 63mm;
  border-radius: 2mm;
}

.circle {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -999;
  background: red;
  width: 68mm;
  height: 68mm;
  border-radius: 100%;
}

<div class="template">
  <div class="rectangle"></div>
  <div class="circle"></div>
</div>

Any ideas of how I could achieve that sweet border?

Just use an SVG and it's simple. – Paulie_D Jul 31 '19 at 14:15 — Paulie_D, Jul 31 '19 at 14:15

Temani Afif · Accepted Answer · 2019-07-31T14:42:45.283

Use a pseudo element with radial-gradient:

.box {
  width:200px;
  height:150px;
  background:red;
  border-radius:10px;
  position:relative;
  margin-top:50px;
}
.box:before {
  content:"";
  position:absolute;
  bottom:100%;
  left:0;
  right:0;
  height:50px; /* Same as margin*/
  background:radial-gradient(circle,red 49.5%,transparent 50%) top/150% 400%;
  
}

<div class="box">

</div>

Then you can add border:

.box {
  width:200px;
  height:150px;
  background:red;
  border-radius:10px;
  position:relative;
  margin-top:50px;
  border:3px solid blue;
}
.box:before {
  content:"";
  position:absolute;
  bottom:100%;
  left:0;
  right:0;
  height:50px; /* Same as margin*/
  background:radial-gradient(circle,red 49.5%,blue 50% calc(50% + 3px),transparent calc(50% + 4px)) top/150% 400%;
  
}

<div class="box">

</div>

And also use a transparent color:

.box {
  width:200px;
  height:150px;
  background:rgba(255,0,0,0.5) padding-box;
  border-radius:10px;
  position:relative;
  margin-top:50px;
  border:3px solid blue;
  border-top-color:transparent;
}
.box:before {
  content:"";
  position:absolute;
  bottom:100%;
  left:0;
  right:0;
  height:50px; /* Same as margin*/
  background:radial-gradient(circle,rgba(255,0,0,0.5) 49.5%,blue 50% calc(50% + 3px),transparent calc(50% + 4px)) top/150% 400%; 
}
.box:after {
  content:"";
  position:absolute;
  top:-3px;
  height:100%;
  left:-3px;
  right:-3px;
  border-top:3px solid blue;
  border-right:3px solid transparent;
  border-left:3px solid transparent;
  border-radius:inherit;
  clip-path:polygon(0 0,28px 0,28px 50px,calc(100% - 28px) 50px,calc(100% - 28px) 0, 100% 0,100% 100%,0 100%);
}

body {
 background:url(https://picsum.photos/id/1001/800/800) center/cover;
}

<div class="box">

</div>

I think the point here is that the OP wants a **border** around this shape. — Paulie_D, Jul 31 '19 at 14:23
Thanks ! It looks like it work, need to change the way I make the shape but the result seems to be what I need. Do you mind explaining what is happening with the radial-gradient? — Ruben, Jul 31 '19 at 14:37
@Ruben I am using the radial-gradient to define the circle. then I simply adjust the position (`top`) and the size (`150% 400%`) to get the needed result. Play with the value and you will see — Temani Afif, Jul 31 '19 at 14:40

Border of rectangle with curved side

1 Answers1