We can create and design different shapes using css design. The web application required a circle shape for the functions. We can create a circle using the tag's simple and multiple CSS properties. We can set the HTML elements' height, width, and border-radius.
Basic CSS Filled Circle
The simple solid circle displays various colors. The background property is employed to add color to the circular shape. The circle can be filled with colors, text, or any other content.
Syntax
The following syntax shows the CSS circle design.
<style>
Element {
height: 30px;
width: 30px;
background-color: grey;
border-radius: 50%;
}
</style>
Parameter
The following parameters are required for the circle.
- Height: The vertical radius of the circle set using the height property.
- Width: The horizontal radius of the circle set using the height property. The height and width must be set on the exact measurement.
- Background colour: The background colour shows the circle area. It offers a filled circle of the tag.
- Border-radius: The radius helps curve the height and width's border. The border-radius can set the 50% value by default.
Examples
The demonstration illustrates a fundamental CSS circular layout for websites. Various designs can be implemented for circular shapes.
Example 1:
The provided instance demonstrates a basic circle with no associated data.
<!DOCTYPE html>
<html>
<head>
<title> CSS Circle Design </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* Show basic CSS Circle Design */
.circle {
height: 30px;
width: 30px;
background-color: grey;
border-radius: 50%;
display: inline-block;
}
.main_div {
background-color: #F4F2F2;
height:150px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h2> CSS Circle Design </h2>
<b> We can see the dots or filled circles! </b>
<div class = "circles">
<p class = "circle"></p>
<p class = "circle"></p>
<p class = "circle"></p>
<p class = "circle"></p>
</div>
</div>
</body>
</html>
Output
The output shows the basic circle of the tag.
Example 2:
The provided illustration showcases a basic circle featuring data and diverse background hues.
<!DOCTYPE html>
<html>
<head>
<title> CSS Circle Design </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* Show basic CSS Circle Design */
.circle1 {
border-radius: 50%;
width: 50px;
height: 50px;
padding: 12px;
background: orange;
color: #000;
text-align: center;
font: 32px Arial, sans-serif;
margin-left:15px;
display: inline-block;
}
.circle2 {
border-radius: 50%;
width: 50px;
height: 50px;
padding: 12px;
background: red;
color: #000;
text-align: center;
font: 32px Arial, sans-serif;
margin-left:15px;
display: inline-block;
}
.main_div {
background-color: #F4F2F2;
height:200px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h2> CSS Circle Design </h2>
<b> We can see the dots or filled circles! </b>
<div class = "circles">
<p class = "circle1"> Css </p>
<p class = "circle2"> Js </p>
<p class = "circle1"> 1 </p>
</div>
</div>
</body>
</html>
Output
The output shows the basic circle of the tag.
Basic CSS Empty Circle
The simple unfilled circle displays varying border hues. Utilize the border attribute to specify the circle's dimensions. Customize the circle with specific colors, text, and additional details.
Syntax
The following syntax shows the CSS circle design.
<style>
Element {
height: 30px;
width: 30px;
background-color: grey;
border-radius: 50%;
}
</style>
Parameter
The following parameters are required for the circle.
- Height and width: the basic circle property required for all types of the circle. The height and width can be set to the same value.
- Border: the border colour shows the circle area. It can be any size and any colour.
- Border-radius: the radius creates the curve of the circle. The border-radius is set to 50% by default.
Examples
The sample demonstrates a simple CSS design featuring empty circles for a webpage. Various colors and sizes can be applied to customize the circle shapes.
Example 1:
The provided instance demonstrates the basic bordered circle without any data.
<!DOCTYPE html>
<html>
<head>
<title> CSS Circle Design </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* Show basic CSS Circle Design */
.circle {
height: 30px;
width: 30px;
border: 2px solid grey;
border-radius: 50%;
display: inline-block;
}
.main_div {
background-color: #F4F2F2;
height:150px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h2> CSS Circle Design </h2>
<b> We can see the empty circle! </b>
<div class = "circles">
<p class = "circle"></p>
<p class = "circle"></p>
<p class = "circle"></p>
<p class = "circle"></p>
</div>
</div>
</body>
</html>
Output
The output shows the basic circle of the tag.
Example 2:
The provided instance demonstrates the basic circular shape outlined with information.
<!DOCTYPE html>
<html>
<head>
<title> CSS Circle Design </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* Show basic CSS Circle Design */
.circle1 {
border-radius: 50%;
width: 50px;
height: 50px;
padding: 12px;
border: 2px solid orange;
color: #000;
text-align: center;
font: 32px Arial, sans-serif;
margin-left:15px;
display: inline-block;
}
.circle2 {
border-radius: 50%;
width: 50px;
height: 50px;
padding: 12px;
border: 2px solid red;
color: #000;
text-align: center;
margin-left:15px;
display: inline-block;
}
.main_div {
background-color: #F4F2F2;
height:200px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h2> CSS Circle Design </h2>
<b> We can see the multiple circles with data! </b>
<div class = "circles">
<p class = "circle1"> Css </p>
<p class = "circle2">
<img src = "https://placehold.co/300x300/9b59b6/ffffff?text=Profile" alt = "Avatar" style = "width:100%;height:100%;">
</p>
<p class = "circle1"> 1 </p>
</div>
</div>
</body>
</html>
Output
The output shows the basic circle of the tag.
CSS Circle Designs
The circular layout displays dimensions, borders, background color, and content using CSS attributes.
Examples
The various instances below illustrate the diverse background and border hues. A circular form can be generated for each necessary tag.
Example 1:
The demonstration generates numerous circles with varying border hues and diverse background shades.
<!DOCTYPE html>
<html>
<head>
<title> CSS Circle Design </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* Show basic CSS Circle Design */
.circle1 {
border-radius: 50%;
width: 50px;
height: 50px;
padding: 12px;
border: 4px solid orange;
background-color:black;
margin-left:15px;
display: inline-block;
}
.circle2 {
border-radius: 50%;
width: 40px;
height: 40px;
padding: 12px;
border: 4px solid navy;
background-color:pink;
margin-left:15px;
display: inline-block;
}
.main_div {
background-color: #F4F2F2;
height:200px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h2> CSS Circle Design </h2>
<b> We can see the various circle designs! </b>
<div class = "circles">
<p class = "circle1"> </p>
<p class = "circle2"> </p>
</div>
</div>
</body>
</html>
Output
The output shows the circle designs of the tag.
Example 2:
The example generates basic circles with background and border colors for the primary div element.
<!DOCTYPE html>
<html>
<head>
<title> CSS Circle Design </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* Show basic CSS Circle Design */
.main_div {
border-radius: 50%;
width: 250px;
height: 250px;
padding: 12px;
border: 2px solid orange;
color: #000;
text-align: center;
font: 14px Arial, sans-serif;
margin-left:15px;
display: inline-block;
}
.circle2 {
border-radius: 50%;
width: 60px;
height: 60px;
padding: 12px;
border: 2px solid red;
color: #000;
text-align: center;
margin-left:15px;
display: inline-block;
}
.main_div {
background-color: #F4F2F2;
height:200px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h2> CSS Circle Design </h2>
<b> We can see the multiple circles! </b>
<div class = "circles">
<p class = "circle2">
<img src = "https://placehold.co/300x300/9b59b6/ffffff?text=Profile" alt = "Avatar" style = "width:100%;height:100%;">
</p>
</div>
</div>
</body>
</html>
Output
The result displays the circular layouts of the provided tag.
Conclusion
CSS properties are employed to generate and define circular shapes along with their content and styling. Circles can accommodate various types of data, text, and visuals within them.