Create Square Shape – Stunning CSS

thumbnail

In this tutorial, you will read about creating square shape using CSS. We will create three squares with three different colors, that is red-square, yellow-square, and green-square. The square will have 100px and 100px for the width and height.

The CSS will be like below:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.red-square{
    width: 100px;
    height: 100px;
    background: red;
}

.yellow-square{
    width: 100px;
    height: 100px;
    background: yellow;
}

.green-square{
    width: 100px;
    height: 100px;
    background: green;
}
  
</style>
</head>
<body>

<h2>Square Shape</h2>

<div class="red-square"></div>
<br>
<div class="yellow-square"></div>
<br>
<div class="green-square"></div>
<br>

</body>
</html>

When you open at the browser, the result will be like below:

Back To Top