CSS masks available

Question

Is it possible to have a mask in CSS

I was wondering if I can use a mask to do something like this.

It would be nice if I could do it something like this.

    <div class="circle">
      <img src="face.jpg" alt="" />
    </div>

If I can't do it this way, this is the only way to do it in Photoshop, and then have a flat square image with a face inside the circle.

+3

ttmt Feb 06 '14 at 19:43

2 answers

CSS border-radius , , div, "" .

1

border-radius . . HTML, ( ).

border-radius div. . . .

, border-radius (. ). , , ,

0

potatoes 06 . '14 20:20

Danip · Accepted Answer · 2014-02-06T19:44:40+0000

You just need to work with the properties border-radiusand overflow:hiddenin the container. Like this:

.circle {
  width:300px;
  height:300px;
  border-radius:50%;
  overflow:hidden;
}