Image rounded corners?

[ForumSurfer]

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.

[Summer2024 · Accepted solution]

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

1. 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;">

2. 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

1. 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

1. Find Your Image:

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

2. Add Custom CSS:

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

Tips for Best Results

1. 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 */

2. 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:

1. Check image container settings
2. Verify CSS is properly applied
3. Clear browser cache
4. Make sure there's no conflicting CSS

I hope this helps! 

[ForumSurfer]

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

1. 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.

[Summer2024]

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

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

Method 2: Using Weebly's Section Class

1. Add Section:

   1. Drag 'Section' element
      → Click section
      → Advanced
      → Custom CSS Class: "rounded-corners"
2. 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!