How to add border to a circle image in DevEco Studio?

Question

Whenever I am using border-radius property the border to the image is not coming but when I am not using the border-radius property the square image is coming along with the border.[

Answer 1

Try to add border: 1px solid rgba(0,0,0,0.9); like following:

css:

.container {
    flex-direction: column;
}
.out-container {
    margin: 20px;
}
.round {
    border-radius: 150px;
    border: 1px solid rgba(0,0,0,0.9);
    overflow: hidden ;
    width: 170px;
    height: 150px;
}

hml:

<div class="container">
    <div class="container">
        <div>
            <image class="images round" src="common/images/bg-tv.jpg"></image>
        </div>
    </div>
    </div>