Home
CSS
CSS Rounded Corners
Tryit: Creating elliptical corners
Run ❯
Get your
own
website
❯
Run Code
Ctrl+Alt+R
Save Code
Ctrl+Alt+A
Change Orientation
Ctrl+Alt+O
Change Theme
Ctrl+Alt+D
Go to Spaces
Ctrl+Alt+P
<!DOCTYPE html> <html> <head> <style> #div1 { border-radius: 70px / 30px; background: #04AA6D; width: 200px; height: 150px; } #div2 { border-radius: 15px / 50px; background: #04AA6D; width: 200px; height: 150px; } #div3 { border-radius: 50%; background: #04AA6D; width: 200px; height: 150px; } #div4 { border-radius: 50%; background: #04AA6D; width: 200px; height: 200px; } </style> </head> <body> <h1>The border-radius Property</h1> <p>Elliptical shape - border-radius: 70px / 30px:</p> <div id="div1"></div> <p>Elliptical shape - border-radius: 15px / 50px:</p> <div id="div2"></div> <p>Oval shape - border-radius: 50%:</p> <div id="div3"></div> <p>Circular shape - border-radius: 50%:</p> <div id="div4"></div> </body> </html>
