Elliptical Border Radius in React Native

Viewed 10816

I'm trying to recreate this shape in React Native. It's made with 2 overlapping shapes, one square and one with a border-radius on the top and bottom (the square is there to hide the border radius on the top).

Here's the CSS used to generate it:

#square {
   width: 200px;
   height: 180px;
   background: red;
 }

 #tv {
   position: relative;
   margin-top: 100px;
   width: 200px;
   height: 200px;
   margin: 20px 0;
   background: red;
   border-radius: 100px / 20px;
 }

But I can't find any documentation on the border-radius property, so I don't know if it's possible to do elliptical radii like you can in CSS.

1 Answers
Related