thread Re: Image rounded corners? in Payments Troubleshooting

Image rounded corners?

ForumSurfer — Sun, 21 Sep 2025 10:40:20 GMT

How do I round the corners of an image in Weebly. I know the css is border-radius: 20px; but how do I achieve it for particular image on a page (not the whole site)?

thanks.

Re: Image rounded corners?

Summer2024 — Tue, 11 Mar 2025 20:42:08 GMT

Hi @ForumSurfer !

I have included some options below for how to achieve this. Please let me know if you have any questions!

Using Custom HTML Element

Add HTML Element:

Drag & Drop 'Custom HTML' element to your page → Click to edit → Paste this code:

<img src="YOUR-IMAGE-URL" style="border-radius: 20px;">
Get Your Image URL:
- Upload image to Weebly
- Right-click on image
- Select 'Copy Image Address'
- Paste in the code above

Using Embed Code Element

Add Custom CSS:

<div class="rounded-image"> <img src="YOUR-IMAGE-URL"> </div> <style> .rounded-image img { border-radius: 20px; overflow: hidden; } </style>

Adding Custom CSS ID

Find Your Image:
- Click on the image
- Go to 'Advanced' settings
- Add an ID (e.g., "rounded-pic")
Add Custom CSS:

#rounded-pic { border-radius: 20px; }

Tips for Best Results

Adjusting the Radius:
- Smaller numbers = slightly rounded
- Larger numbers = more rounded
- Use 50% for perfect circles
border-radius: 10px; /* subtle */ border-radius: 20px; /* medium */ border-radius: 50%; /* circle */
Different Corner Styles:

/* Round specific corners */ border-radius: 20px 0 0 20px; /* left side only */ border-radius: 20px 20px 0 0; /* top only */

Troubleshooting

If the rounded corners aren't showing:

Check image container settings
Verify CSS is properly applied
Clear browser cache
Make sure there's no conflicting CSS

I hope this helps!

Re: Image rounded corners?

ForumSurfer — Wed, 12 Mar 2025 10:25:17 GMT

Comprehensive reply, thanks. However I want to define a class so other admins/authors can do this to their images on different pages w/o having to do it to each image. So I have added: .write-page-meditation .corners {border-radius:20px;} to main.less (the site CSS file). BUT your suggestion:

Adding Custom CSS ID

Find Your Image:
- Click on the image
- Go to 'Advanced' settings
- Add an ID (e.g., "rounded-pic")

does not allow me to add an ID corners in the Advanced (Weebly) for the image.

}

Please advise on this method. Thanks.

Re: Image rounded corners?

Summer2024 — Wed, 12 Mar 2025 20:23:53 GMT

Hi @ForumSurfer

Weebly's interface can be tricky with custom classes. Here's how to properly add a class to images in Weebly:

Method 1: Using Custom HTML Element

Create your CSS
1. .rounded-corners {
  border-radius: 20px;
  overflow: hidden;
  }
Add Image with Class
1. <div class="rounded-corners">
  <img src="YOUR-IMAGE-URL">
  </div>

Method 2: Using Weebly's Section Class

Add Section:
1. Drag 'Section' element
  → Click section
  → Advanced
  → Custom CSS Class: "rounded-corners"
Add CSS:
1. .rounded-corners img {
  border-radius: 20px;
  }

Method 3: Target Specific Page Areas

/* Target all images in specific section */
.write-page-meditation img {
border-radius: 20px;
}

/* Target specific content areas */
.content-area-name img {
border-radius: 20px;
}

If Classes Don't Apply:

Check CSS specificity
Verify class names
Clear cache
Publish changes

I hope this helps!