October 10, 2022

How to Create Oval Shape in HTML and CSS

In this tutorial, we will learn how to create oval shape in HTML and CSS. Sometimes when you are working on a website, you want to give different shapes to a div to make your website look good in terms of appearance.

By default, the div is a rectangular-shaped box, but by using CSS border-radius properties, you can easily transform it into an oval shape.

In the following example, we will demonstrate how you can create an oval shape using CSS. Please have a look over the code example and the steps given below.

HTML

In the HTML file, we have one empty div element with a class name .oval.
In the head element, we have added a stylesheet style.css using the link element.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Oval shape div</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div class="oval"></div>
</body>

</html>

CSS

We are selecting the div using the class name .oval and setting the margin property value to 0 auto to horizontally center align the div.
The height and width property value to 100px and 200px, border property value to 2px solid black, background-color property value to yellow, and the border-radius property value to 50%. As a result, it will create an oval shape div.

.oval {
    margin: 0 auto;
    height: 100px;
    width: 200px;
    border: 2px solid black;
    background-color: yellow;
    border-radius: 50%;
}

You May Also Like: