# Border Radius And Colors

**Hype** 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-images` - this variable adjusts the `border-radius` for images.
5. `--border-radius-blocks` - this variable adjusts the `border-radius` for various elements on the website, including sidebar widgets, post's content blocks, etc.
6. `--border-radius-navigation` - this variable adjusts the `border-radius` for navigation block in header.
7. `--border-radius-header-buttons` - this variable adjusts the `border-radius` for button in header.

### 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-images: 8px;
       --border-radius-blocks: 8px;
       --border-radius-navigation: 6px;
       --border-radius-header-buttons: 4px;
     }
   </style>
   ```

<figure><img src="https://609546565-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEtsGfsW99UrVt2tgoUZE%2Fuploads%2FwYeF4bFW17tyNo36AllY%2Fborder-radius.jpg?alt=media&#x26;token=e49f7cc0-5bb5-455e-841d-7bc211c4ffde" alt=""><figcaption></figcaption></figure>

4. Click **Save**

**Hype** supports customizing background color for tag 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. Update the CSS selector to target the desired tag and apply your preferred color. For example:

   **Copy**

   ```
   <style>
     .post-tag--health{
       background-color: #FFFFD0;
     }
     
     .post-tag--lifestyle{
       background-color: #FFE3ED;
     }

     .post-tag--animals{
       background-color: #F0E6FF;
     }

     .post-tag--tv-shows{
       background-color: #D8FFD5;
     }

     .post-tag--celebs{
       background-color: #FFE2D7;
     }
   </style>
   ```

<figure><img src="https://609546565-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEtsGfsW99UrVt2tgoUZE%2Fuploads%2FIkoyW1YlqcIE4ozZvTrp%2Ftag-code-inj.jpg?alt=media&#x26;token=53cf3e61-2e80-4533-bf14-ebfc8328185e" alt=""><figcaption></figcaption></figure>

4. Click **Save**