Rounded corners for pricing tables, feature cards, testimonial cards
You are building a pricing table or card elements in your Carrd.co website? Here’s a step by step guide that will let you use rounded corners on boxes. We use this technique in our pricing tables for the UI Kit Carrd template, check out the demo.
Carrd does not offer rounded corners out the box. There are actually zero settings for the appearance of the columns, only for the whole container. Therefore we will need to turn to custom CSS.
Please note: you’ll need the Carrd Pro Plus plan for this to work
A big thank you goes out to Jason for providing the initial version of this tutorial. He also builds plugins for Carrd, make sure you check those out, too.
Here’s what you need to do:
Add a container element and columns
Step 1 – Container and columns
- Create a Container element
- Set it to use columns
- Add the number of columns you need
- Set the container’s background to none (Appearance > Background)
Step 2 – Add elements
We cannot edit the container element to do rounded corners for the columns beause Carrd does not offer it. So we’ll do a little magic trick. We will apply the required custom CSS styles to the elements within the columns:
- Add a Text element in one of the columns
- Add another Text element below it
- Add yet another Text element
You should now have three elements stacked in the column.
Apply the rounded corners
To be able to see the rounded corners the columns need to have a background color. We are using a semi transparent light green background in theis example. This probably does not match your Carrd site. See below for how to customize that.
Step 3 – Apply rounded corners at the top
- Select the top Text element in the column
- Under Appearance > Margins set margins to 0
- Under Settings > Styles > Default > Text field, paste the this CSS code
background-color: #e2fcb366;
border-radius: 10px 10px 0 0;
padding: 20px 20px 0 20px;- Add the same CSS code under Settings > Styles > Mobile > Text
Step 4 – Style the column body element
- Select the middle Text element in the column
- Under Appearance > Margins set margins to 0
- Under Settings > Styles > Default > Text field, paste this CSS code
background-color: #e2fcb366;
padding: 0px 20px 0 20px;- Add the same CSS code under Settings > Styles > Mobile > Text
Step 5 – Apply bottom rounded corners
- select the bottom Text element in the column
- Under Appearance > Margins set margins to 0
- Under Settings > Styles > Default > Text field, paste this CSS code:
background-color: #e2fcb366;
border-radius: 0 0 10px 10px;
padding: 0 20px 20px 20px;- Add the same CSS under Settings > Styles > Mobile > Text.
Step 6 – Round the corners for the other columns
The first column should now have rounded corners. To round the corners for the remaining columns
- Duplicate all three elements in the column
- Move the duplicates to the next column, keeping the sequence intact
- Alternatively use copy and paste to copy the elements over
Now all columns should have those rounded corners. But maybe they don’t yet look exactly the way you want. So let’s customize them.
Style those rounded corner columns like a pro
Step 7 – Customize your rounded corners and background
Adjust the rounded corner radius
The CSS used above uses border-radius values of 10px . This is the amount of rounding. If you adjust this value for the top and bottom element. Carrd can use any value that CSS works with.
Adjust the background color
Depending on the background color of you Carrd site, you will want to choose a different color for the columns. We have used a background-color of #e2fcb366 which is a semi transparent light green in the example. This probably does not match your website. To change it, use #ffffff for white, #000000 for black or any other color code.
To get a semi transparent background, use 8 digit color codes and adjust the last two digits (66 in our light green example). Or chnge the transparency using the black and white slider control below the color wheel. Again, there are no limits in Carrd, you can do anything CSS lets you do.
Adjust the padding
We have used a padding value of 20px. Adjust this to more or less to have a larger or smaller space between content and column borders.
Use other or more Carrd elements
The example uses text elements only. You can change these into the elements you actually need. Just make sure you apply the same custom CSS to them.
You need more than three elements? Use the CSS for the middle element for all elements that are between the top and bottom.
Leave the top and bottom element empty
Filling the rounded corner column with content can be easier when you just add elements between top and bottom. This means top and bottom Text elements need to be empty. In Carrd editor you cannot remove all text from a text element, though. You can easily worked around this limitation though. As the text for the top and bottom element just put “.” or anything else, really. Then under Appearance > Color choose a fully transparent color, e.g. #00000000 (that’s 8 zeros, not 6).
Learn more
You want to learn more abou this? Great! Here’s a few links to read about CSS color codes and transparency, about padding and border radius. All this CSS will work in Carrd like a charm. Just remember that sites that use custom CSS may be harder to maintain by others as the custom settings are somewhat hidden in Carrd editor. Also not everybody knows how to work with CSS.
Boom, there you have your columns with rounded corners.
We hope you liked this tutorial. Check out other tips and tricks on our Carrd Blog:
- Element styles in Carrd to save time and more consistent styling at the same time
- Read about how to hide elements in Carrd
- How to add a blog to your Carrd webiste
Use Carrd templates
We also offer Carrd templates – they are a great short cut to designing everything yourself. We have templates with pricing tables, FAQ sections, team pages, contact form, all professionally designed for you.
And yet they are fully customizable. So you can add and remove elements as you like.
Templates are really budget-friendly at just $25 or $19.
Grab them and launch your site sooner, grow your audience sooner with a newsletter signup template – or sell your first product sooner with an e-commerce template for Carrd. The possibilities are endless. We even have template for SaaS product websites and or a local dentist.
We’d like to hear from you
Have any feedback or questions? Drop us an email.