CSS Circle With Border

Shapes are frequently used in web designing. More specifically, the circle shape is used to draw the user’s attention and to make something stand out, such as profile pictures are mostly embedded in a circle frame. CSS offers several styling properties for the elements to make them look better for the application like the “border-radius” property is utilized to make the element’s edges round and the “border” property sets the element’s border.

This write-up will instruct you:

• How to Create a Circle with Border in CSS?
• How to Add Color in the Bordered Circle Using CSS?
• How to Adjust the Border Style of a Circle With CSS?

How to Create a Circle With Border in CSS?

To create a circle with a border in CSS, first, the border property is used to apply the border around the element. The “border-radius” property is used to make the border circular shape.

For this purpose, go through the provided example.

Create an HTML File

First, add a “<div>” element and assign it a class “circle-div”:

Style “circle-div” Class

Access the “<div>” container with the help of the specified class “.circle-div” and apply the following properties:

Here:

• “width” specifies the circle’s width.
• “height” determines the circle’s height.
• “border-radius” with the value “50%” signifies the circle border.
• “border” is utilized to apply a border with the specified border width, style, and color.

Output

How to Add Color in the Bordered Circle Using CSS?

The CSS “background-color” property is utilized to add color to the circle as follows:

Output

How to Adjust the Border Style of a Circle With CSS?

By specifying the border style, we can style the circle’s border. Some frequently used border styles are listed below:

• Dotted
• Solid
• Groove
• Inset
• Outset
• Double

Dotted Border

Set the border style to “dotted” to specify the dotted border:

Output

Groove Border

Apply the border style “groove” in the border property:

Output

We have successfully demonstrated how to create and style the bordered circle in CSS.

Conclusion

To create a circle with borders, two major CSS properties are utilized. To create a border, first, add a “div” container and access it in CSS using its respective class. Then, apply the CSS “border-radius” property and adjust it to “50%” to create a circle, and the CSS “border” property is utilized to set a border around the circle. This blog has explained the method for creating a circle with borders in CSS.