How to Create a Circle with Two Distinct Borders Responsively Using CSS?

Styling Circles with Dual Borders Responsively

Creating a CSS circle is straightforward, as demonstrated by the provided working CSS. However, to achieve a circle with two distinct borders, we need to employ additional CSS techniques.

Using the provided HTML structure, where a single

element represents the circle:

<code class="html"><div></div></code>

We can modify the CSS as follows to create a circle with two borders:

<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 CSS adds a second border using the box-shadow property, which creates a 5px wide red shadow around the circle, effectively creating the illusion of a second border. The color of the second border is determined by the red value in the box-shadow property.

The provided CSS achieves the desired effect, creating a circle with two distinct borders that responds fluidly to changes in the container's size.

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

css html using Property this border

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn