0

How to make this shape by HTML & CSS inner rounded border radius?

enter image description here

Minal Chauhan
  • 6,025
  • 8
  • 21
  • 41
Mina Medhat
  • 1
  • 1
  • 1

1 Answers1

2

Try this

HTML:

<div class="shape"></div>

CSS:

.shape{
    background: #074b7e;
    width: 300px;
    height: 150px;
    overflow: hidden;
    position: relative;
 }

 .shape:before{
     content: '';
     width: 150px;
     height: 150px;
     background: #fff;
     position: absolute;
     top: 0;
     right: -75px;
     border-radius: 100%;
 }

Example: https://jsfiddle.net/s2oew522/

MohammadReza Mahmoudi
  • 1,294
  • 7
  • 14