How to Create a Circle with Two Distinct Borders Responsively Using CSS?-CSS Tutorial-php.cn

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

Mary-Kate Olsen

Release： 2024-11-02 01:38:30

Original

837 people have browsed it

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>

Copy after login

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>

Copy after login

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!