Can I put a border radius on a before or after pseudo selector image?

Question

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

Answer 1

Yes you can use border-radius in pseudo-elements ::after, ::before with an 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 border-radius in Your CSS rule, for :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;
}