I just want to round the corners of my images without having to use externals apps. I have seen multiple threads about this, but it still hasn't been resolved.
This was a feature previously but has been removed why?
Solved
Radius / rounded corners for blocks
+2Best answer by annasophiefc
Hi
As explained in this thread - the rounded corner funcationality is no longer supported. However, Klaviyo has made it super easy to integrate with Canva where you can send your creative content directly from Canva to Klaviyo. This is the solution I use - and highly recommend, when I need to round corners - and it is really working for me! I found with the old in-app image editor you could never really get the corner radius the same for all images - nor could I control darkmode visualization in the old editor - so if you ask me, I don’t miss that feature.
I hope this helps a little!
+24Hi
As explained in this thread - the rounded corner funcationality is no longer supported. However, Klaviyo has made it super easy to integrate with Canva where you can send your creative content directly from Canva to Klaviyo. This is the solution I use - and highly recommend, when I need to round corners - and it is really working for me! I found with the old in-app image editor you could never really get the corner radius the same for all images - nor could I control darkmode visualization in the old editor - so if you ask me, I don’t miss that feature.
I hope this helps a little!
+24
Workaround for this is, use the HTML block with inline CSS for the border radius. Like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Placeholder 2000x800</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: #f7f7f7;
}
.wrapper {
padding: 0 15px; /* left & right padding */
}
.placeholder {
width: 2000px;
height: 200px;
border-radius: 25px;
display: block;
background-color: #ddd;
object-fit: cover;
}
</style>
</head>
<body>
<div class="wrapper">
<img
class="placeholder"
alt="2000x800 placeholder"
src="data:image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg' width='2000' height='800'>
<rect width='2000' height='800' fill='%23dddddd'/>
<text x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle'
font-family='Arial, sans-serif' font-size='72' fill='%23555'>2000 × 800</text>
</svg>"
/>
</div>
</body>
</html>
Not ideal but works. And can be used for other things aswell.
Log in to the Community
Use your Klaviyo credentials
Log in with Klaviyo
Use your Klaviyo credentials
Log in with KlaviyoEnter your E-mail address. We'll send you an e-mail with instructions to reset your password.