How Can I Create a Double Border for a Circular Element?

Circle with Double Borders

In this article, we explore a solution to the challenge of adding double borders to circular elements. Squares and rectangles readily lend themselves to double borders, but applying the same technique to circles requires a more creative approach.

Consider the CSS provided in the problem statement, which generates a circular div with a single green border:

div.circle {
  width: 90%;
  height: 0;
  padding-bottom: 90%;
  margin: auto;
  float: none;
  border-radius: 50%;
  border: 1px solid green;
  background: pink;
}

Our objective is to modify this CSS to create double borders. The outline property was previously attempted without success, as it produced a rectangular outline. Nested divs and background colors also proved ineffective due to alignment issues.

To achieve our desired effect, we modify the CSS as follows:

div {
  width: 20em;
  height: 20em;
  border-radius: 50%;
  background-color: red;
  border: 4px solid #fff;
  box-shadow: 0 0 0 5px red;
}

This CSS creates a div with a solid white border and a red inner shadow. The box-shadow property emulates the second border by projecting a colored inset from the div's edge.

The key difference between this solution and previous attempts lies in the use of a box shadow instead of a second border or outline. By creatively employing box shadow, we achieve the illusion of a double border without sacrificing the circular shape.

The above is the detailed content of How Can I Create a Double Border for a Circular Element?. For more information, please follow other related articles on the PHP Chinese website!