Skip to main content

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.
Be the first to reply!

Reply