---
title: "Easy to Adjust CSS Variables"
url: "https://help.productfruits.com/en/article/easy-to-adjust-css-variables"
language: "en"
last_updated: "2024-12-18T07:00:47.417Z"
---

# Easy to Adjust CSS Variables

These CSS variables are a quick way to change the look & feel of some Product Fruits elements. They can be redefined with the `.productfruits--container-root` selector.

```css
/* Tours and Hints cards */
--card-border-radius: 5px;
--card-header-padding: 26px;
--card-footer-padding: 24px 24px 22px 24px;
--card-body-text-padding: 12px 26px;
--card-body-button-padding: 15px;

/* Buttons in general (cards [next, back, custom buttons], feedback and some others) */
--btn-border-radius: 5px;
--btn-padding: 13px 27px;
--btn-font-size: 1em;
```

**Example**

```css
.productfruits--container-root {
    --card-border-radius: 15px;
}
```

This will make the corners of your cards more rounded.