Is it possible to place the radius of the border on the image before or after the pseudo selector?

Question

Is there any way to get the border radius on: before or: after when I put url () in the content: '' property?

Answer 1

Yes, you can use border-radius in pseudo-elements ::after , ::before with a background image:

 div:before { content: ""; display: block; width: 200px; height: 100px; background-image: url(http://placehold.it/200x100); border-radius: 10px; } 

 <div></div> 

Answer 2

Just set the border radius in the CSS rule for the :before or :after element.

Jsfiddle

 #container { background: red; width: 100px; height: 100px; position: relative; float: left; } #container:before { content: ''; background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.svg?v=1bc6a0c03b68') blue; background-size: 1000px auto; width: 100px; height: 100px; border-radius: 50px; position: absolute; }