Image border

HTML & CSS
1

How can i make image border rounded to my profile images
i tried this border-radius: 50% but not working

<!DOCTYPE html>
<html>
<head>
<style>
.roundedimg {
   border-image: linear-gradient(to right, #3acfd5 0%, #a5bbe4 100%) 1;
  border-radius: 50%;
  width: 50px;
	height: 50px;
  border-style: solid;
  padding: 5px;
}
</style>
</head>
<body style="background-color: #000;">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Circle-icons-profile.svg/1200px-Circle-icons-profile.svg.png" class="roundedimg">
</body>
</html>
2

Border-radius has no effect on the border image. See ‘Rounded Borders’ section here:

3

not helpfully, this instructions doesn’t solve my problem

4

Assuming the image is not transparent and assuming you don’t want to see anything under the image you could fake it with a background gradient like this.

https://codepen.io/paulobrien/pen/VYwObWZ/7b08a264719eec0dbe0af9bb8333a462

Note that the outline color must match the background of the document (or parent elements background) for this effect to work.

5

For modern browsers you could get a transparent section using mask-image but it needs a parent wrapper on the image and the code is a little more complex.

https://codepen.io/paulobrien/pen/mydYwRM/0878031412f399ae42a72a1ddb0b6792

6

Thank you