HTML5 / CSS3 Circle with Partial Border

HTML5 / CSS3 Circle with Partial Border

Creating a circle with a partial border in HTML5 and CSS3 involves using the border-radius property for the circle shape and linear-gradient for the partial border effect. Here's how you can achieve this:

HTML Structure

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Circle with Partial Border</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="circle"></div> </body> </html>

CSS Styles (styles.css)

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } .circle { width: 200px; height: 200px; border-radius: 50%; /* Ensures the element is a circle */ background-color: #f8f8f8; /* Fallback background color */ background-image: linear-gradient(45deg, transparent 50%, #ff6347 50%); /* Defines the partial border */ border: 3px solid transparent; /* Transparent border to maintain circle shape */ }

Explanation:

  1. HTML Structure:

    • The <div class="circle"></div> element is used to create the circle shape.

  2. CSS Styles:

    • border-radius: 50%; creates a perfect circle by setting the border radius to 50% of the element's width and height.
    • background-color: #f8f8f8; provides a fallback background color for browsers that do not support gradients.
    • background-image: linear-gradient(45deg, transparent 50%, #ff6347 50%); creates a linear gradient for the partial border:
      • transparent 50% makes the border transparent for the first 50% of the circle.
      • #ff6347 50% gives the border a color (#ff6347 is a shade of red) for the remaining 50%.
    • border: 3px solid transparent; ensures the circle maintains its shape, adjusting for the width of the partial border.

  3. Adjustments:

    • Modify width, height, and border-width values as needed to adjust the size and thickness of the circle and its partial border.

This setup provides a basic example of creating a circle with a partial border using HTML5 and CSS3. Adjust colors, sizes, and gradients as per your design requirements.

Examples

  1. How to create a circle with a partial border in HTML/CSS?

    • Description: Create a circular element with a border that only covers a portion of the circumference.
    • Code:
      <div class="circle"></div> 
      .circle { width: 100px; height: 100px; border: 4px solid #f0f0f0; border-radius: 50%; position: relative; } .circle::before { content: ""; position: absolute; width: 100%; height: 100%; border-top: 4px solid #ff7f50; border-radius: 50%; transform: rotate(45deg); }

  2. How to create a half-circle with a partial border using CSS?

    • Description: Render a semicircular shape with a border that extends halfway around the circumference.
    • Code:
      <div class="half-circle"></div> 
      .half-circle { width: 100px; height: 50px; border-top: 4px solid #4682b4; border-radius: 0 0 50% 50%; position: relative; } .half-circle::before { content: ""; position: absolute; width: 100%; height: 100%; border: 4px solid #f0f0f0; border-radius: 50%; top: -4px; }

  3. How to create a circle with an arc border in CSS?

    • Description: Style a circular element with an arced border that covers a specific angle of the circle.
    • Code:
      <div class="arc-circle"></div> 
      .arc-circle { width: 100px; height: 100px; border: 4px solid transparent; border-top: 4px solid #7cfc00; border-radius: 50%; position: relative; } .arc-circle::before { content: ""; position: absolute; width: 100%; height: 100%; border: 4px solid #f0f0f0; border-radius: 50%; clip: rect(0px, 50px, 100px, 0px); /* Adjust clip to control arc */ }

  4. How to create a quarter-circle with a partial border in CSS?

    • Description: Create a quarter-circle shape with a border that covers one-fourth of the circle.
    • Code:
      <div class="quarter-circle"></div> 
      .quarter-circle { width: 100px; height: 100px; border-right: 4px solid #ff6347; border-bottom: 4px solid transparent; border-radius: 0 0 0 100%; position: relative; } .quarter-circle::before { content: ""; position: absolute; width: 100%; height: 100%; border: 4px solid #f0f0f0; border-radius: 50%; clip: rect(auto, 50px, 100px, auto); /* Adjust clip to control arc */ }

  5. How to create a circle with a dashed border in CSS?

    • Description: Style a circular element with a dashed border that extends around its circumference.
    • Code:
      <div class="dashed-circle"></div> 
      .dashed-circle { width: 100px; height: 100px; border: 4px dashed #4169e1; border-radius: 50%; position: relative; }

  6. How to create a circle with alternating colored segments in CSS?

    • Description: Render a circular shape with alternating colored segments using CSS.
    • Code:
      <div class="segmented-circle"></div> 
      .segmented-circle { width: 100px; height: 100px; border: 4px solid transparent; border-top-color: #ff69b4; border-right-color: #ff69b4; border-radius: 50%; position: relative; } .segmented-circle::before { content: ""; position: absolute; width: 100%; height: 100%; border: 4px solid #f0f0f0; border-radius: 50%; transform: rotate(45deg); }

  7. How to create a ring with a partial border in CSS?

    • Description: Create a ring-shaped element with a border that covers a portion of its circumference.
    • Code:
      <div class="ring"></div> 
      .ring { width: 100px; height: 100px; border: 4px solid #20b2aa; border-radius: 50%; position: relative; } .ring::before { content: ""; position: absolute; width: 100%; height: 100%; border: 4px solid transparent; border-top-color: #20b2aa; border-radius: 50%; clip: rect(0px, 50px, 100px, 0px); /* Adjust clip to control arc */ }

  8. How to create a concentric circle with a partial border in CSS?

    • Description: Create a circle within another circle with a partial border on the outer circle.
    • Code:
      <div class="concentric-circle"></div> 
      .concentric-circle { width: 100px; height: 100px; border: 4px solid #8a2be2; border-radius: 50%; position: relative; } .concentric-circle::before { content: ""; position: absolute; width: 50px; height: 50px; border: 4px solid transparent; border-top-color: #8a2be2; border-radius: 50%; top: 25px; left: 25px; }

  9. How to create a donut-shaped circle with partial borders in CSS?

    • Description: Render a circle with a hole (donut shape) and partial borders on the inner and outer edges.
    • Code:
      <div class="donut-circle"></div> 
      .donut-circle { width: 100px; height: 100px; border: 4px solid #ffa500; border-radius: 50%; position: relative; } .donut-circle::before { content: ""; position: absolute; width: 50px; height: 50px; border: 4px solid transparent; border-top-color: #ffa500; border-radius: 50%; top: 25px; left: 25px; }

  10. How to create a rounded rectangle with partial borders in CSS?

    • Description: Style a rectangular element with rounded corners and partial borders on specific sides.
    • Code:
      <div class="rounded-rectangle"></div> 
      .rounded-rectangle { width: 100px; height: 50px; border: 4px solid #00ced1; border-radius: 10px; position: relative; } .rounded-rectangle::before { content: ""; position: absolute; width: 100%; height: 100%; border: 4px solid transparent; border-left-color: #00ced1; clip: rect(auto, 50px, auto, auto); /* Adjust clip to control arc */ }

More Tags

mser xmllint appium-android extends density-plot firebase-analytics gradle-task observablecollection vk mat-dialog

More Programming Questions

More Weather Calculators

More Electronics Circuits Calculators

More Bio laboratory Calculators

More Other animals Calculators