How to Create a Circle with Two Borders Using CSS?

How to Create a Circle with Two Borders

Styling a div into a circle with two borders responsively can be accomplished with CSS. The original circle div CSS provided can be modified to create the desired effect:

div.circle {
  width: 90%;
  height: 0;
  padding-bottom: 90%;
  margin: auto;
  float: none;
  border-radius: 50%;
  background: pink;
  border: 1px solid green;
  box-shadow: 0 0 0 5px red; /* Adds a second red border */
}

Here, the box-shadow property is used to create a second border around the circle. The values 0 0 0 5px define the offset, blur, and spread of the shadow, while red specifies the color of the border.

The inner div approach mentioned in the question can be implemented with an additional div inside the circle div:

<code class="html">&lt;div class=&quot;circle&quot;&gt;
  &lt;div class=&quot;inner&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</code>

The inner div can be styled with a background color and aligned vertically using flexbox:

<code class="css">div.circle {
  display: flex;
  align-items: center;
  justify-content: center;
}

div.inner {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: blue;
}</code>

The above is the detailed content of How to Create a Circle with Two Borders Using CSS?. For more information, please follow other related articles on the PHP Chinese website!