I want to achive effect of round black-white picture and green line:
I know how to make picture round and black-white, but I don’t know how to make this green border.
Here is my code:
.comitee-image {
width: 300px;
height: 300px;
border-radius: 50%;
filter: grayscale(100%);
object-fit: cover;
}
Could somebody help me please?
2
Answers
So if you want only green border at bottom right then:
picture
element and then use::before
in CSS.You can see here how to make it.
You have a div container relative, with your image inside of it.
Then you can use ::before pseudo element to add an absolute element slightly bigger than the parent, centered and with a border.
The transparent border can be bigger so the green one gonna shrink, BUT the green one can be distorted.