How can i draw inner radius in css?

Question

Please help me out i want to make a div like this

Answer 1

The easiest method will be using a pseudo element. By absolutely positioning the :after element, you can get the desired effect.

.box {
  background: #000;
  width: 300px;
  height: 150px;
  position: relative;
}
.box:after {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #fff;
  right: -75px;
  bottom: -75px;
}

<div class="box"></div>

Answer 2

Method # 01:

Use raidal-gradient:

body {
  background: #f0f0f0;
  margin: 0;
}
.box {
  background: radial-gradient(circle at bottom right, transparent 60px, #000 60px);
  height: 150px;
  width: 250px;
}

<div class="box"></div>

Method # 02:

You can create it with combination of :before or :after pseudo element and box-shadow css property.

body {
  background: #f0f0f0;
  margin: 0;
}
.box {
  position: relative;
  overflow: hidden;
  height: 150px;
  width: 250px;
}

.box:before {
  box-shadow: 0 0 0 1000px #000;
  border-radius: 100%;
  position: absolute;
  bottom: -30px;
  height: 100px;
  right: -35px;
  width: 100px;
  z-index: -1;
  content: '';
}

<div class="box"></div>

Answer 3

Try this CSS,

.rec{
    height: 200px;
    background: black;
    position: relative;
    width:600px;
}

.rec:after {
    content: '';
    position: absolute;
    bottom: -20px; right: -20px;
    border-bottom: 100px solid white;
    border-left: 100px solid white;
    width: 0;
    background:#fff;
    border-radius:150px;

}