How to make not completed borders around an element in CSS? - html

Question

I want it to be like this shape .
Just tell me how to make the not completed borders.
And one last thing is that I have to use one div.<div>Elzero</div> with pseudo-elements
Thanks in advance.

Answer 1

you can make it with transparent border
div
{
background-color: #ddd;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 30px;
margin: 40px auto;
color: black;
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
}
div::before
{
content: "";
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
transform: translate(-10px, -10px);
z-index: -1;
border: 10px solid;
border-color: red red red transparent;
}
body ::after
{
content: "";
width: 220px;
height: 220px;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
transform: translate(-21px, -22px);
z-index: -8;
border: 12px solid;
background: transparent;
border-color: blue transparent blue blue;
}
<div></div>

Answer 2

Try That Bro :)
div {
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 30px;
margin: 50px auto;
height: 200px;
width: 200px;
border-radius: 50%;
position: relative;
}
div::before{
content: "";
height: 200px;
width: 200px;
border-radius: 50%;
border: 10px solid #03a9f4;
border-left-color: transparent;
position: absolute;
top: 0;
left: 0;
transform: translate(-10px, -10px);
z-index: -1;
transition: transform 0.5s linear;
}
div:hover::before{
transform: translate(-10px, -10px) rotate(360deg);
}
div::after {
content: "";
height: 220px;
width: 220px;
border-radius: 50%;
border: 10px solid #e91e63;
border-right-color: transparent;
position: absolute;
top: 0;
left: 0;
transform: translate(-20px, -20px);
z-index: -2;
transition: transform 0.5s 0.5s linear;
}
div:hover::after{
transform: translate(-20px, -20px) rotate(360deg);
}

Answer 3

Just put the text/string 'HERE' in a anchor tag like this:
HERE