How to make circle, square and rectangle with CSS?

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

Last updated:7/15/2021 12:50:57 AM

1 Answers

Ravi Vishwakarma
Ravi Vishwakarma

How to make circle, square and rectangle with CSS?

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


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


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


Answer