Search code examples
cssimagebordereffect

Any CSS way of transforming the edges of an image to a chiselled slate stone effect?

Please check this image. (The black slate)

Is there any way of achieving these edges through CSS? The only way I can think of is by using an image editor.

Thanks for your time.

Solution

  • To follow on from the comments, I don't think what your asking for is possible through CSS. I think you're right is through editing the image itself.

    But what you can do is create an image to give you the effect, to save you editing each image separately, and then applying the image as a background on a wrapping element, so your mark-up could look like this for example:

    <span class="chiseled">
    <img />
</span>

    You can then use your created image and apply that to the span and overlay it on the image to have the effect.