We’ve already shown you how to create a row of coloured content boxes in Carrd, but what if you want them to have rounded corners?
That method doesn’t work, so you need a different way you can do it and include rounded corners – useful for pricing tables, product benefits and testimonial cards. Here’s a quick step-by-step guide. This method uses code, not the native Carrd features.
Note: This method requires a Carrd Pro Plus plan, as it uses Advanced Settings.
How to create a row of coloured boxes with rounded corners
Step 1 – Set up the row and first box
- Set up a Container element with columns
- In the first column, add a Text element with your text content
Step 2 – Add the CSS code
- Click on the Text element and go to its Settings, then the Styles tab
- Add the below code in the box labeled Text
- Change the variables if you want too, from our defaults
background-color: #D4C9FF;
padding: 20px;
border-radius: 30px;
Step 3 – Duplicate the box
- Now you’ve created the first box, duplicate it into the other two columns
- At this point, you could go further and change the colours (or other styles) so each text box is different.
Step 4 – Set up Mobile view
The Container element now needs to be set to display nicely on mobile:
- Click on the Container, go to Settings and the Appearance tab
- Find the Mobile section, and set to Manual
- Then change Layout to Stacked
- Adjust the Gutters if you would like
There you have it, you should now have a row of coloured boxes with rounded corners!
Alternative method
If you want to make this easier than duplicating the same code into each Text element (if you’re using the exact same styles on each box) then another way to do it would be with an Embed element.
- Instead of putting the CSS code in each Text element’s Style tab, add it in a hidden Embed element somewhere on the page instead.
- You would need to link them by giving each Text element a class name, such as box:
- Then the code would need to look like this:
<style>
.box {
background-color: #D4C9FF;
padding: 20px;
border-radius: 30px;
}
</style>
We hope you liked this tutorial. Check out other Carrd tips & tricks.
Written by
