• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to footer

Meyne

  • Services
    • Custom blog
    • Custom website
    • A Quick Fix
    • Recipe Index Creation
  • Blog
  • About
  • Contact & FAQ
  • Client Access

How to make a square image round

Written on:4.5.17 Updated on: 1.23.19

If you have just one or two images that you want to be circles instead of squares, there’s a really simple line of code you can add to the image.  It will be much faster than editing your image in Photoshop.

If you remember from this post, you’ll remember that the code to add an image is this: <img src="">

You put your image url in between the quotation marks.  (You get the image url by right clicking on your image and selecting “Copy Image Address.”)

This is what the square image will look like:

 

To make that image appear round instead of square, we just need to paste in one little piece of code inside that.

This is the code we’ll paste in: style="border-radius: 50%;"

That code is saying to round the borders of the image starting at half-way across the edge.

You will paste that piece of code right in between img and src.  So it will look like this:

<img style="border-radius: 50%;" src="">

Then this is what you’ll have:

 

If you have any questions, ask in the comments below!

 

Do you sell products or services?

clarify your message workbook

You have 3 seconds to get your visitor's attention. Get your free 10-page guide & workbook that will help you do it like a pro.

Woo hoo! The workbook is on its way to your inbox. I look forward to getting to know you!

Reader Interactions

Leave a Reply Cancel reply

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

Primary Sidebar

I’m Christina:

And I’m here to help bloggers and small business owners create good-looking & functional websites (and keep them that way).

  • Email
  • Instagram
  • Pinterest
  • YouTube

Level up your blog

Get actionable tips once or twice a month and be the first to hear when the DIY shop opens.

Hang on...

Woo hoo!

Looking forward to getting to know you.

Looking for something?

My Top Recommendations:

Hosting:
Host With Love (just starting)*
SiteGround (growing well)*
Cloudways (high traffic)*

Domains:
NameCheap

Everything Else:
Trello (for organziation)
ShareASale (affiliate income)*
Canva (easy graphics)
MailerLite (for emails)
WP Rocket (for a fast blog)*

*Affiliate links

Recent Posts:

free e-book for business owners clarify your message

Before Footer

Hi! I’m Christina.

Web developer and former blogger. I’m here to help bloggers who have great style and vision, to build exactly the site they need to achieve their goals.

LET'S STAY IN TOUCH

Woo hoo! You should get a message from me soon. I look forward to getting to know you!

LET'S STAY IN TOUCH

Receive emails once or twice a month with a website tip or two, booking availability, and news when the shop re-opens.

Footer

LET'S WORK TOGETHER

© 2019 Meyne Websites · Built by me