How to Round Content Areas and Images using HTML/CSS in Drag-and-Drop Editor

Rounding content areas and images can add a visually appealing touch to your web design. Here's how you can achieve this using HTML/CSS:

Rounding Content Areas

To round the whole content area of a row, you can insert and HTML Block that will allow you to write custom HTML and CSS for that specific content area:

Here's an example using the border-radius property to round a content area with a green border:

<div style="border: 3px solid green; border-radius: 16px;">
  <!-- Your content here -->
</div>

Rounding Images

To round images, you can use the border-radius property in CSS. Here's an example:

<img src="your-image.jpg" style="border-radius: 50%;">

Adjust the border-radius value as needed for different levels of rounding.

Considerations

• Alignment: When adding custom HTML/CSS within templates, ensure proper alignment by testing and adjusting as needed.
• Cross-browser Compatibility: Test your rounded content and images across different browsers to ensure consistent rendering.