Round picture frames

How to make, in an easy way, a round picture and add a frame to it.
At the end of this tutorial I have placed some round picture frames.

1. make your picture square, you can use MS paint for that.

2. add your picture via Add Media on your website.

3. Use this html code, replace the colored parts for your own data in your text editor

<a style=”display: inline;”><img style=”width: 200px; height: 200px; border-radius: 200px;” title=”molen.jpg” src=“” alt=”molen.jpg” /></a>

4. Go to visual and take a screenshot.

5. Go to paint open the screenshot and cut the round picture.

6. Go to and make a transparent background ( see previous tutorial)

7. Add the picture in layers at

8. The result:

Round picture frameRound picture frame

Round Picture Frames

found on Google Free for reusing.

Round picture framescircle-bluecolored_border-48407_640colorful_circle1decoration_circles_pngdragonFlower_flowers-153210_640flower_purple_frame-036golden_frame-305566_640google_photo_framepurple_flower_framesilver-circle-mattedsnake


I hope you liked this tutorial, click here for more tutorials.

Have you ever thought about creating your own website?

Then this is your chance! We offer you a 7-day totally free premium access to worlds best website builder. Imagine, a website of your own, and you can try this out for free. You build your first website, put in some words of your own, and you can show your website to your mom, husband, wife or children. Wouldn’t that be awesome? The Wealthy Affiliate University gives everybody the opportunity to try their program out for free, no credit card needed. Free = Free!

button_join wealthy Affiliate-for-free



Other interesting posts:


(Visited 1,079 times, 1 visits today)

Hey, nice to meet you. I am Loes and I love to work, create and make money on the internet. My vision for the future is promising because the activities and sales go to triple over the next few years. You can take advantage of it too. Step into the world of affiliate marketing today, and work towards financial freedom for you and for your family. If you would like to learn how to build your own Wordpress website, click here to open your free account today!

  1. John Worthy says:

    Thanks Loes. Actually, it’s not the code, I get the image round alright. It’s the pixlr part that gimme troubles, how to get the border around and the grey in the background. When I drop it in paint, I get a white background. Aaargh

    • Loes says:

      You can easily change the white background in grey, using paint, John. Select the color and use the little bucket, if you can’t manage you may send me the picture and I do it for you:)

  2. John Worthy says:

    Hi Loes, I told you that I am too stupid to work with pixlr.
    Here is what I have.
    One portrait image .png 300 x 300 pix no background

    Here is what I want

    The image in a circle, with a dark grey background and a plain white, small border, like in this sample image.

    How do I get the grey background in the circle?
    How do I get the darn frame around

    I was watching your pixlr video about 20 times, the one you show how to remove certain elements, but never could follow your quick movements, and your software, of course, has Dutch titles to all functions.

    Maybe you can point me to lessons of yours that clear things up for me


    • Loes says:

      Hi John, as you are not that handy with codes, I am going to send you over to Lunapic to create your round picture in an easy online to use program. Upload your picture, then measure the rounding between 150 and 200, then click on download. Hope to hear from you if it worked for you, have a great creative and productive day, Loes

  3. Marie says:

    How cool! It looks so professional. t seems a bit hard to do, but not impossible – I have to try it. Thanks for sharing.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>