How to create circle in CSS?
How to create circle in CSS?
Cascading Style Sheets, also known as CSS, is a potent tool for styling web pages. Circles are a frequent design feature in web pages. A circle is a straightforward yet sophisticated design element that may be used to draw attention to key details or add visual interest to a page. In this tutorial, we'll look at various CSS techniques for drawing circles.
Using the border-radius property is method one.
CSS's border-radius attribute is the most widely used tool for making circles. We can round the corners of an element using the border-radius attribute. The border-radius attribute must be set to 50% of the element's width and height in order to generate a circle.
Let's make a circle with a diameter of 100 pixels, for illustration:
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
}
The circle's width, height, and border-radius property have all been set in the code above to 100 pixels each. With a diameter of 100 pixels, this results in a perfect circle. In order to make the circle visible on the page, the background-color attribute has also been set to red.
Method 2: Applying the clip-path property
The clip-path feature in CSS can also be used to draw a circle. We can clip an element to a certain shape or path using the clip-path attribute. We must set the value of clip-path to the circle() function in order to generate a circle using this technique.
Let's use clip-path to, for instance, draw a circle with a diameter of 100 pixels:
.circle {
width: 100px;
height: 100px;
background-color: blue;
clip-path: circle(50%);
}
The circle's width and height have been set to 100 pixels in the code above, and the background-color attribute has been set to blue. Additionally, we have specified a 50% clip-path value for the circle() function. A circle with a radius of 100 pixels is produced.
Third approach: applying pseudo-elements
Using pseudo-elements is another method for making a circle in CSS. Virtual elements called pseudo-elements can be utilised to give an element more content or design. A circle can be made by combining the before and after pseudo-elements.
As an illustration, let's use the before pseudo-element to make a circle with a diameter of 100 pixels:
.circle {
width: 100px;
height: 100px;
position: relative;
background-color: green;
}
.circle::before {
content: "";
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: yellow;
position: absolute;
top: 0;
left: 0;
}
The circle's width and height have been set in the code above to 100 pixels, and the background-color attribute has been set to green.
The before pseudo-element will now place itself relative to the circle element because we also set the position attribute to relative. In the following step, we introduced the before pseudo-element and set its content to an empty string. To make the element behave as a block-level element, the display attribute has been set to block. In order to make a circle, we have set the border-radius attribute of the before pseudo-element to 50% and the width and height of the element to 100%.
To make the circle visible, the background-color property has been set to yellow.
In order to position the before pseudo-element in the top left corner of the circle element, we have lastly set the position property to absolute and the top and left attributes to 0.
Adjusting the size of the circle:
The width and height of the element define the size of the circle when making one with the border-radius technique. Just change the width and height parameters to your desired values if you want to make a larger or smaller circle.
You could, for instance, set the width and height to 50 pixels to make a smaller circle with a 50-pixel diameter:
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
}
Creating a circle with a border:
You only need to add the border attribute to the CSS code to make a circle with a border. Use the CSS shown below, for instance, to make a circle with a 2 pixel thick black border:
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid black;
background-color: white;
}
To encircle the circle, a border has been added to the code above with the border property, which has a value of 2 pixels and is solid black.
Creating a circle with a gradient background:
Using the background property and setting the value to a gradient function, you can make a circle with a gradated background. Use the CSS shown below, for instance, to make a circle with a backdrop that fades from red to yellow:
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: radial-gradient(circle, red, yellow);
}
The circle shape and radial-gradient function were combined in the code above to produce a gradient background that is shaped like a circle. The first parameter in the function specifies the gradient's form, while the second and third parameters define the gradient's colours.
Creating Multiple circles:
The CSS code may be easily duplicated, and the values for each circle can be changed, to produce numerous circles. The CSS shown below, for instance, can be used to make three circles of varying sizes and hues.
.circle-1 {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
}
.circle-2 {
width: 75px;
height: 75px;
border-radius: 50%;
background-color: green;
}
.circle-3 {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: blue;
}
By duplicating the CSS code and changing the values for each circle individually, we were able to create three separate circles in the code above. Each circle has a different size and colour.
Bullet Points:
- By changing the values for the horizontal and vertical radii, the border-radius attribute can also be used to make ellipses. For instance, an ellipse is produced when the border-radius property is set to 50% for the width and 75% for the height, respectively.
- We may build a variety of shapes, not only circles, when we employ the clip-path property. The polygon() function, for instance, can be used to construct forms with numerous sides by changing the value of clip-path to this function.
- When using pseudo-elements, we can also make a circle by using the after pseudo-element. In order to give the circle different effects, like a gradient backdrop or a border, we may also further decorate the pseudo-elements.
- When forming a circle using any of the three techniques, it is crucial to make sure that the element's width and height are equal. A circle will be formed if the width and height are equal, but an oval will result if they are not.
- It is possible to change the circle's colour using the background-color attribute. As an alternative, we can utilise the background-image property to add an image to the circle's background.
- SVG (Scalable Vector Graphics) can also be used to draw circles in place of CSS. SVG is a fantastic choice for more intricate designs because it has more sophisticated capabilities like animations and interactivity.
- We can utilise classes to prevent code duplication if we need to generate numerous circles that are the same size and style. All the items that require circles can be given a class that will be applied to them all.
Conclusion:
A quick and efficient approach to give a web page some visual appeal is by adding a circle using CSS. Three different approaches to making circles in CSS have been examined in this article.
The first approach was making a circle by using the border-radius attribute. This basic strategy is the one that is most frequently utilised. We set the element's width and height to be equal, and we set the border-radius attribute to be equal to half of those values.
The clip-path feature was utilised in the second approach. By using the circle() function as the value of clip-path, this technique can be used. By clipping the element to a particular form or route, a circle is created.
The usage of pseudo-elements was the third technique. In order to make a circle using this technique, a before or after pseudo-element must be added.
Using several techniques, circles, a common design element, can be readily generated with CSS. We are able to make circles that perfectly suit our unique design requirements by modifying the variables for size, border, and background. Circles can be used to add visual appeal to web pages and produce original designs with a little bit of imagination.