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.
- In the HTML file, we have one empty
div element with a class name
- In the head element, we have added a stylesheet
style.css using the link element.
<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">
- 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.
margin: 0 auto;
border: 2px solid black;