> For the complete documentation index, see [llms.txt](https://highfivethemes.gitbook.io/persona-user-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://highfivethemes.gitbook.io/persona-user-documentation/custom-settings/border-radius.md).

# 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: <a href="#to-customize" id="to-customize"></a>

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>
   ```

   <figure><img src="/files/Kx4o0fIPLkogj5EyMVct" alt=""><figcaption><p>Code injection with border-radius variables</p></figcaption></figure>
4. Click **Save**