How can I make my border-radius curve outward?

Question

I am try to make a div have borders like the following drawing:

This is what I have tried:

div {      height: 100px;      width: 100px;      border-bottom-right-radius:100px 10px;      border:1px solid #000;  }

<div></div>

What is an effect way to accomplish this?

Answer 1

Using :before and :after

The top border is created with the :before:

• Its height is the same as the border radius

• It is positioned just outside with top and lines up with the left border thanks to left

• Its width is calculated with calc to precisely line up the top of the curve

• The curve can be refined with transform: skewX(-60deg)

The left border is created with the :after:

• It is given a 100% height minus the height of the before and the thickness of the border with calc

Examples

Number 1 - a bit pointy

div {   border-bottom-right-radius: 100px 20px;   border: 1px solid #000;   border-top: none;   height: 500px;   width: 200px;   position: relative;   border-left: none; } div:before, div:after {   content: '';   display: block;   position: absolute;   left: -1px; } div:before {   height: 20px;   width: 100%;   width: calc(100% + 1px);   border-bottom-right-radius: 100px 20px;   border-bottom: 1px solid #000;   border-right: solid 1px #000;   top: -1px; } div:after {   height: calc(100% - 18px);   border-left: 1px solid #000;   top: 19px; }

<div></div>

Number 2 - smoothed out point with skew

div {   border-bottom-right-radius: 100px 20px;   border: 1px solid #000;   border-top: none;   height: 200px;   width: 200px;   position: relative;   border-left: none; } div:before, div:after {   content: '';   display: block;   position: absolute;   left: -1px; } div:before {   height: 20px;   width: 100%;   width: calc(100% - 36px);   border-bottom-right-radius: 100px 20px;   border-bottom: 1px solid #000;   border-right: solid 2px #000;   top: 0px;   left: 17px;   transform: skewX(-60deg); } div:after {   height: calc(100% - 19px);   border-left: 1px solid #000;   top: 20px; }

<div></div>