Giving an SVG a border


Is it possible to give an SVG a border using CSS?

I currently have an SVG inside an img tag like this:

<div class="smile-5">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/smile.svg" class="img-fluid" alt="Smile" />

I am trying to add a 2px border around it. Also, it is a circle with a shape inside it, so I’m wondering if the border will just go around the outer shape and not the inner shape?

I’ve tried adding a border to it in illustrator, but as I am scaling the image in different places, the border doesn’t remain at 2px.

Any ideas would be great :slight_smile:

Thank you!

You could try put the border on the container div, making a circle around the scaled image. :slightly_smiling_face:


.smile-5 {
  display: table;
  border: 2px solid red;
  border-radius: 50%;

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.