Home > Web Front-end > CSS Tutorial > How Can I Create a Double Border for a Circular Element?

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

Susan Sarandon
Release: 2024-11-04 06:47:30
Original
984 people have browsed it

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;
}
Copy after login

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;
}
Copy after login

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!

source:php.cn
Statement of this Website
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
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template