CSS：borderRadius与边框颜色使用及25%彩色边框圆形实现问题

Hey there! I get what you're aiming for—a circular border that's only 25% colored (#3498db) and the rest transparent. The problem with your current code is that single-element border properties can't pull this off, because when you use border-radius: 50% (or 100px in your case), the border segments connect seamlessly with rounded corners. Even setting three sides to transparent leaves those rounded corner transitions visible, resulting in a full border that doesn't match your goal.

Let me show you two reliable ways to get that 25% colored circular border:

Solution 1: Modern Conic Gradient (Simplest Approach) #

This method uses CSS conic gradients and background clipping to simulate the border—it's clean, easy to adjust, and works in all modern browsers.

.progressLayer {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: absolute;
  /* Replace border-width with padding to create the "border" space */
  padding: 20px;
  /* Restrict the gradient to the padding area (not the center content) */
  background-clip: content-box;
  /* Conic gradient: starts at -90deg (top of the circle), shows color for 90deg (25% of 360), then transparent */
  background-image: conic-gradient(#3498db 0deg 90deg, transparent 90deg 360deg);
}

How it works: #

• padding: 20px takes the place of your original borderWidth:20—this creates the empty space where our "border" will live.
• background-clip: content-box ensures the gradient only fills that padding area, keeping the circle's center transparent (or matching your background).
• The conic gradient defines exactly 25% (90 degrees) of colored area starting from the top. You can easily adjust the percentage by changing the degree values (e.g., 108deg for 30% coverage).

Solution 2: Pseudo-Element + Clip Path (For Older Browser Support) #

If you need to support browsers that don't handle conic gradients, this method uses a pseudo-element and clip-path to hide most of a full colored border:

.progressLayer {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: absolute;
  /* Base transparent border to match the final size */
  border: 20px solid transparent;
  overflow: hidden;
}

.progressLayer::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  /* Full colored border on the pseudo-element */
  border: 20px solid #3498db;
  /* Rotate to align the colored segment at the top */
  transform: rotate(-90deg);
  /* Clip to only show the left half of the border (25% of the full circle) */
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

How it works: #

• The parent element acts as a transparent circular frame.
• The pseudo-element has a full colored circular border, then we rotate it to align the colored segment at the top, and clip it to only display the left 50%—which equals exactly 25% of the full circle's perimeter.

Why Your Original Code Didn't Work #

When you set borderLeftColor, borderBottomColor, etc., on a circular element, the rounded corners connect all border segments. Even if three sides are transparent, those rounded transitions between the colored top border and transparent left/right borders will still be visible (taking on the default border color if you didn't set it explicitly), making it look like a full border. Borders on rounded elements are continuous curves, not discrete straight segments, so you can't just hide three sides and get a clean 25% segment.

内容的提问来源于stack exchange，提问作者Atul