How to shape a div corner in css

Question

how to make a div border below corner like in this below image in css.

@WaisKamal can we achieve it through css? – Ahsan Ullah Jun 07 '20 at 14:41 — Ahsan Ullah, Jun 07 '20 at 14:41
have you tried border-radius – godfather Jun 07 '20 at 14:50 — godfather, Jun 07 '20 at 14:50
@godfather nope border radius will not work – Ahsan Ullah Jun 07 '20 at 14:54 — Ahsan Ullah, Jun 07 '20 at 14:54

score 1 · Accepted Answer · answered Jun 07 '20 at 14:54

You can hack using multiple elements like this:

.d1 {
  width: 100px;
  height: 100px;
  background-color: #00f;
}

.wrapper {
  width: 100px;
  height: 20px;
  background-color: #fff;
  margin-top: -20px;
}

.d2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #00f;
}

.wrapper2 {
  width: 100px;
  height: 10px;
  background-color: #00f;
  margin-top: -20px;
  position: absolute;
}

<div class="d1"></div>
<div class="wrapper">
  <div class="d2"></div>
</div>
<div class="wrapper2"></div>

How to shape a div corner in css

1 Answers1