CODEWITHSUNDEEP
htmlcss
kiner_shah
kiner_shah

Reputation: 4641

How to get a partial circle border around an image?

I want to design the following for displaying profile picture. I tried using border-style: dashed, but that's not what I want; I want only three lines (dashes) in the border. How can I accomplish this?

Here's what I tried:

#circle {
    border-radius: 100%;
    width: 100px;
    height: 100px;
    border: 5px dashed;
    background-color: yellow;
}
<!DOCTYPE html>
<html>
<body>
   <div id="circle"></div>
</body>
</html>

The effect I desire:

profile picture

Upvotes: 0

Views: 346

Answers (2)

Temani Afif
Temani Afif

Reputation: 272901

Here is an idea with multiple background:

#circle {
  border-radius: 100%;
  width: 100px;
  height: 100px;
  border: 5px solid transparent; /* Control the thickness*/
  background:
    url(https://picsum.photos/id/100/200/200) center/cover content-box,
    
    linear-gradient(blue,blue) top         /100% 20% border-box,
    linear-gradient(blue,blue) bottom left /35%  50% border-box,
    linear-gradient(blue,blue) bottom right/35%  50% border-box;
  background-repeat:no-repeat;
}
<div id="circle"></div>

If you want space between image and border add an extra layer:

#circle {
  border-radius: 100%;
  width: 100px;
  height: 100px;
  border: 5px solid transparent; /*Control the thickness*/
  padding:3px; /*control the space*/
  background:
    url(https://picsum.photos/id/100/200/200) center/cover content-box,
    linear-gradient(white,white) padding-box,
    linear-gradient(blue,blue) top         /100% 20% border-box,
    linear-gradient(blue,blue) bottom left /35%  50% border-box,
    linear-gradient(blue,blue) bottom right/35%  50% border-box;
  background-repeat:no-repeat;
}
<div id="circle"></div>

Upvotes: 3

oma
oma

Reputation: 1894

I tried something like that, not sure if entirely fit your needs..but give it a try, maybe it's a good starting point for you. Play with the numbers from css file and maybe you got exactly what you need.

Codesandbox here: https://codesandbox.io/s/vibrant-glade-uo7bg

.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: gray;
  position: relative;
}

#shadow-1 {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 85px;
  height: 85px;
  transform: rotate(-20deg);
  border-radius: 50%;
  box-shadow: 5px 5px 0 -4px blue;
}

#shadow-2 {
  position: absolute;
  top: -5px;
  left: -2.5px;
  transform: rotate(-40deg);
  width: 85px;
  height: 85px;
  border-radius: 50%;
  box-shadow: 5px -5px 0 -4px blue;
}

#shadow-3 {
  position: absolute;
  top: -1px;
  left: -4px;
  width: 85px;
  height: 85px;
  transform: rotate(20deg);
  border-radius: 50%;
  box-shadow: -5px 5px 0 -4px blue;
}
<h1>Hello Circle!</h1>
<div>
  <div class="circle">
  <div id="shadow-1"></div>
  <div id="shadow-2"></div>
  <div id="shadow-3"></div>
  </div>
</div>

Upvotes: 2

Related Questions