Skip to main content

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


Customer.io

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.
Did this topic help you find an answer to your question?

0 replies

Be the first to reply!

Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings