How to Style a Responsive Circle with Two Borders?

Styling a Circle with Two Borders Responsively

To style a circle with two borders that adapts to the container's size, you can utilize the following approach:

<div></div>

<code class="css">div {
  width: 20em;
  height: 20em;
  border-radius: 50%;
  background-color: red;
  border: 4px solid #fff;
  box-shadow: 0 0 0 5px red;
}</code>

This structure creates a circle with a solid white border and a red inner border represented by the box-shadow property. The box-shadow effectively creates an illusion of a second border by extending the background color beyond the circle's edge. This approach ensures that the circle's styling remains responsive, adjusting its dimensions and appearance based on the container's size.

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