Menu
I want to make an oval like:
But when i used this code:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" /> <title>Oval</title> <style type="text/css"> .oval { width: 160px; height: 80px; background: #a84909; border-radius: 40px; } </style> </head> <body> <div class="oval"></div> </body> </html> It gives me this:
To make a circle it works, but an oval not.
441
All you have to do is to change border-radius: 40px to border-radius: 50% .
If you put 50% before the slash symbol, you will get a vertical half-ellipse. And if you put 50% after the slash symbol, you'll get a horizontal half-ellipse.
All you have to do is to change border-radius: 40px to border-radius: 50%.
.oval { width: 160px; height: 80px; background: #a84909; border-radius: 50%; }<div class="oval"></div>You need to set the border radius in percentage :
Percentage : Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.
source : MDN
For a detailed explanation of why pixel values for border-radius can't output an oval shape see Border-radius in percentage (%) and pixels (px)
Example :
border-radius: 50%; .oval { width: 160px; height: 80px; background: #a84909; border-radius: 50%; }<div class="oval"></div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
