---
title: "How to make circle, square and rectangle with CSS?"  
description: "How to make circle, square and rectangle with CSS?"  
author: "Ethan Karla"  
published: 2021-07-15  
updated: 2021-07-15  
canonical: https://www.mindstick.com/forum/156489/how-to-make-circle-square-and-rectangle-with-css  
category: "css-css3"  
tags: ["web development", "css-css3", "html5", "web application"]  
reading_time: 3 minutes  

---

# How to make circle, square and rectangle with CSS?

Is it possible to make a shape of square, [circle](https://www.mindstick.com/articles/12253/30-stunning-homepage-layouts-from-circle-creative-shop-multipurpose-wordpress-theme)? If it is possible state with the help of example.

## Replies

### Reply by Ravi Vishwakarma

![How to make circle, square and rectangle with CSS?](https://www.mindstick.com/mindstickforums/3cbd75b8-99c1-48db-8811-f5694c232f47/images/1aab252e-c000-4f86-82a7-301b92f29996.png)

```
<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta charset='utf-8' />
    <style type='text/css'>
        body{
            text-align:center;
            display: flex;
            flex-direction:column;
            justify-content: center;
            align-items: center;
        }
            body div {
                margin: 50px;
            }
            .square {
            width:100px;
            height:100px;
            background-color: GrayText;
        }
    </style>
    <title>Animation Demo</title>
</head>
<body>
    <div class='square'>  </div> Square <br />
</body>
</html>
```

![How to make circle, square and rectangle with CSS?](https://www.mindstick.com/mindstickforums/3cbd75b8-99c1-48db-8811-f5694c232f47/images/dfacd7ea-9007-4af4-a1c1-915b168e5ad7.png)

\

```
<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta charset='utf-8' />
    <style type='text/css'>
        body{
            text-align:center;
            display: flex;
            flex-direction:column;
            justify-content: center;
            align-items: center;
        }
            body div {
                margin: 50px;
            }
           .circle {
            width:100px;
            height:100px;
            border-radius:50%;
            background-color:red;
        }
        }
    </style>
    <title>Animation Demo</title>
</head>
<body>
    <div class='circle'>  </div> circle <br />
</body>
</html>
```

\

![How to make circle, square and rectangle with CSS?](https://www.mindstick.com/mindstickforums/3cbd75b8-99c1-48db-8811-f5694c232f47/images/419be2ea-03dd-43b6-9fbe-7fc44235f857.png)

\

```
<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta charset='utf-8' />
    <style type='text/css'>
        body{
            text-align:center;
            display: flex;
            flex-direction:column;
            justify-content: center;
            align-items: center;
        }
            body div {
                margin: 50px;
            }
           .rect {
            width:200px;
            height:100px;
            background-color:blue;
        }
    </style>
    <title>Animation Demo</title>
</head>
<body>
    <div class='rect'>  </div> Rectangle <br />
</body>
</html>
```

\


---

Original Source: https://www.mindstick.com/forum/156489/how-to-make-circle-square-and-rectangle-with-css

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
