How to make a mask in css?

Hello! There is here such here a css style for images .blocks-dialog .block .ava img {width:50px; }
Can't understand how on top of it to make a round mask with CSS? This for avatars in the dialogue.
September 26th 19 at 07:30
2 answers
September 26th 19 at 07:32
Solution
.ava{
border-radius: 100px;
overflow:hidden;
}


And it is better not to do such nesting.
blocks-dialog .block .ava img{}
In the future it will give problems.
Thank you! But if the input picture is the rectangle? - edwin_Swaniawski47 commented on September 26th 19 at 07:35
Though triangle. The picture is inscribed in a circle which is inscribed in a square 50x50. All that is outside of the circle will be hidden. - wiley.Braun commented on September 26th 19 at 07:38
Strange, what could be the reason for this here? imgur.com/CeIuLlU - edwin_Swaniawski47 commented on September 26th 19 at 07:41
container .ava specify the height and width of 50px - wiley.Braun commented on September 26th 19 at 07:44
excellent, thank you very much! - edwin_Swaniawski47 commented on September 26th 19 at 07:47
September 26th 19 at 07:34
Solution

Find more questions by tags CSSHTML