Create transparent circle with 1 or 2 px border of color [closed]

Question

Create transparent circle with 1 or 2 px border of color [closed]

closed . this question needs details or clarification . He's not getting answers right now.

want to improve this question? Add details and clarifies the problem by editing this post .

Closed 4 years ago .

I need a <div> with border-radius = 100% to also have a border of 1 or 2 px of white color. What happens is that by putting a border: 1px solid white; to a <div> that already has border-radius:100%; the White border comes out cut from all sides. Is there any way to avoid that?

0

Author: Alan, 2016-08-02

Source

1 answers

score 2 · Accepted Answer

Published: Although the layer is rounded, the shape where the content fits is still rectangular, so that it could protrude from the edges and as the case may cover them and not be seen. The CSS overflow:hidden parameter is used to make the content not protrude; Note that it has nothing to do with the solution: each radius is assigned to an edge, so to make a round are not 100% if not 50% since the radius is indicated from the center. But the navigator "cuts" the radius to 50% so with radii of more than 50% the same result is obtained.

body {
   background-color:blue;
  }
#redonda {
    width:200px;
    height:200px;
    border-radius:50%;
    border: solid 3px white;
    overflow:hidden; /* Evitar que el contenido se visualice fuera del borde*/
  }

<div id="redonda"></div>