So I am trying to create scooped corner (on bottom-right only) with border around the complete structure. Please refer image below.

Check image here

I have seen many examples on how to create scooped corners on all the 4 sides and creating scooped corner on one side only. But not able to find anything this specific use case.

I am a beginner in CSS. So my question could be pretty noob also. Thanks in advance.

CodePudding user response：

As this scoop is just for visual effect rather than having any semantics attached, one way of doing this using simple CSS is to use a pseudo element to create it, have that sitting over the actual element and with a background color so it overwrites the borders at the bottom.

To make this general you can introduce CSS variables to set size and positioning in proportion but just to get you started here is an example using vmin as the unit of size:

body {
  background-color: black;
}

div {
  width: 90vmin;
  height: 90vmin;
  position: relative;
  border: solid 3px lime;
  border-radius: 10vmin;
  background-color: gray;
}

div::after {
  content: '';
  position: absolute;
  width: 40%;
  height: 40%;
  border-color: transparent transparent transparent lime;
  border-width: 3px;
  border-style: solid;
  top: 80%;
  left: 80%;
  border-radius: 50%;
  transform: rotate(45deg);
  background-color: black;
}

<div></div>