D-Isla Web Design Blog

How to place an image in a border of color

Steve Davidson, Wednesday, July 29th, 2015

 

1st you need an image, below is an example image called circle_image.png located in /img/

D-Isla Image

 

Now I am going to create a green circle border round this image by using the below css

<img class=”img-responsive”┬ástyle=”border: solid 20px #518a4f; background: #518a4f; border-radius: 50%; padding: 0; margin-right: 20px;” src=”/img/circle_image.png” alt=”" />

You should now have a pretty cool rounded image with a border.

 

 

 

You can make this border bigger or smaller depending on your requirements, here below we have modified the border from 20px to 50px and changed the color by modifying the html hex code #xxxxxx

<img class=”img-responsive”┬ástyle=”border: solid 50px #6acd6a; background: #6acd6a; border-radius: 50%; padding: 0; margin-right: 20px;” src=”/img/circle_image.png” alt=”" />

 

 

 

Have fun making rounded bordered images

Comments are closed.

 

 

Blog Home



Catagory HTML


  • Blog Posts by Catagory