🧮Border Radius

Persona supports customizing Border Radius of different elements.

The theme provides CSS variables that allow you to customize the border-radius of various elements:

1. --border-radius-button - this variable adjusts the border-radius for buttons.

2. --border-radius-input - this variable adjusts the border-radius for inputs.

3. --border-radius-tags - this variable adjusts the border-radius for tags.

4. --border-radius-tag-icons - this variable adjusts the border-radius for tag icon.

5. --border-radius-images - this variable adjusts the border-radius for images.

6. --border-radius-blocks - this variable adjusts the border-radius for various elements on the website, including sidebar widgets, post's content blocks, etc.

7. --border-radius-section - this variable adjusts the border-radius for header and main section.

8. --border-radius-navigation - this variable adjusts the border-radius for navigation block in header.

9. --border-radius-recommendation-block - this variable adjusts the border-radius for recommendation block.

To customize:

1. Access the Settings > Code Injection from the admin menu.

2. Click Open

3. In the provided space, specify the desired border-radius using the appropriate CSS variable. For example:

   Copy

   <style>
     :root {
       --border-radius-button: 8px;
       --border-radius-input: 6px;
       --border-radius-tags: 100px;
       --border-radius-tag-icons: 50%;
       --border-radius-images: 8px;
       --border-radius-blocks: 8px;
       --border-radius-section: 16px;
       --border-radius-navigation: 6px;
       --border-radius-recommendation-block: 4px;
     }
   </style>

   

   Code injection with border-radius variables
4. Click Save