# Tabs Properties

## Overview

<figure><img src="https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-bc08b82e231adeca9defe45dbda8bc83546e3eb5%2Ftheme-tabs.jpg?alt=media" alt=""><figcaption><p>Tabs Properties</p></figcaption></figure>

The **Tabs Properties** section defines the styling of tab components within the application. Tabs are used to organize content into separate views, making it easier for users to navigate through different sections.

## Properties

{% hint style="info" %}
Some properties have an additional button: `Select Color`, which opens the [color chooser](https://docs.servoy.com/reference/servoy-developer/object-editors/color-chooser) wizard.
{% endhint %}

Here's an in-depth look at each property:

### Tab bg

Sets the background color for the tabs.\
Value: Hex color code or CSS variable (e.g., `@body-bg-inverse`).

### Tab text color

Defines the text color for the tabs.\
Value: Hex color code or CSS variable (e.g., `@text-color`).

### Tab text transform

Specifies the text transformation for the tab labels (e.g., uppercase, lowercase).\
Value: CSS text-transform value (e.g., `uppercase`).

### Tab border color

Sets the border color for the tabs.\
Value: Hex color code or CSS variable (e.g., `@body-bg`).

### Tab border width

Specifies the border width for the tabs.\
Value: CSS size value (e.g., `0`).

### Tab border radius

Defines the border radius for the tabs, providing rounded corners if desired.\
Value: CSS size value (e.g., `0`).

### Tab active bg

Sets the background color for the active tab.\
Value: Hex color code or CSS variable (e.g., `@main-color`).

### Tab active text color

Defines the text color for the active tab.\
Value: Hex color code or CSS variable (e.g., `@main-color-inverse`).

### Tab active border color

Specifies the border color for the active tab.\
Value: Hex color code or CSS variable (e.g., `@main-color`).

### Tab active border width

Sets the border width for the active tab.\
Value: CSS size value (e.g., `0`).