Create round corner for a div

Question

I want to create a html based chart like below , not sure how to proceed

score 0 · Accepted Answer · answered Aug 10 '17 at 22:15

0

I think what you want is border-radius ie

.inner {
  background: #FFB6C1;
  width: 40px;
  height:20px;
  border-radius: 20px;
}

.outter {
  width:100px;
  border: 1px solid #ccc;
  border-radius: 20px;
}

<div class="outter">
  <div class="inner"></div>
</div>

answered Aug 10 '17 at 22:15

katniss.everbean

550
2
9

the only problem is when the inner is so small then the radius will break https://jsfiddle.net/z124ey03/ – Somayeh Ghazvinian Aug 10 '17 at 23:25
Use `overflow:hidden;` on the outer div. – katniss.everbean Aug 11 '17 at 15:40

Create round corner for a div

1 Answers1