How to make circle, square and rectangle with CSS?

Ethan Karla 1076 15 Jul 2021

Is it possible to make a shape of square, circle? If it is possible state with the help of example.

1 Answers

Ravi Vishwakarma 15 Jul 2021

<!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>

<!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>

<!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>

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md

forum

How to make circle, square and rectangle with CSS?

Can you answer this question?

1 Answers