Skip to main content

I would like to understand if it is possible to created a radius or rounded corners for blocks. Like an image block or text block. Thank you.

If we can’t get a tool to round the corners, can we at least have access to the source code for the product feed so we can try to round the edges of product photos in HTML? 


Man I’ve been mostly impressed with Klaviyo but threads like this where a community is repeatedly asking for a feature over a number of years and are told “we’re working on it” and then just nothing…kind of a bummer.

 

Anyways. I too upvote this feature request.


Another vote here for rounded corners please! The only hack I’ve found - though not a great one - is to use a button (without a link). Can’t use a lot of text though as the spacing is hard to get right, but the rounded edge is possible. It’s a hacky hack though, rounded edges seems like a basic editor inclusion to me. 


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.