> For the complete documentation index, see [llms.txt](https://docs-siticoneframework.gitbook.io/home/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-siticoneframework.gitbook.io/home/net-framework-or-net-core-ui/input-controls/siticone-togglebutton/border-settings.md).

# Border Settings

Configures the control’s border thickness, color, and style, providing flexible design options that can match various UI themes.

## **Overview**

The **Border Settings** feature controls the outline of the `SiticoneToggleButton`. It lets you specify how the border is drawn (e.g., solid, dashed, dotted, 3D) and dynamically adjust thickness and colors based on whether the toggle is On or Off. By customizing these properties, you can align the control’s appearance with your overall application style, highlight active states, or diminish borders for a minimalistic UI.

***

### **Key API Members**

Below is a table summarizing the primary properties that manage the toggle button’s border configuration:

<table data-header-hidden><thead><tr><th width="217"></th><th></th><th></th><th></th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Type</strong></td><td><strong>Description</strong></td><td><strong>Example</strong></td></tr><tr><td><strong>BorderThickness</strong></td><td><code>float</code></td><td>The width of the border, measured in pixels.</td><td><code>myToggle.BorderThickness = 2f;</code></td></tr><tr><td><strong>BorderStyleOption</strong></td><td><code>BorderStyleOptions</code> (enum)</td><td>Determines the style of the border (e.g., <strong>Solid</strong>, <strong>Dashed</strong>, <strong>Dotted</strong>, <strong>Double</strong>, <strong>3D</strong> styles, etc.).</td><td><code>myToggle.BorderStyleOption = BorderStyleOptions.Dashed;</code></td></tr><tr><td><strong>UntoggledBorderColor</strong></td><td><code>Color</code></td><td>The border color when the control is <strong>Off</strong>.</td><td><code>myToggle.UntoggledBorderColor = Color.Gray;</code></td></tr><tr><td><strong>ToggledBorderColor</strong></td><td><code>Color</code></td><td>The border color when the control is <strong>On</strong>.</td><td><code>myToggle.ToggledBorderColor = Color.Blue;</code></td></tr></tbody></table>

***

### **Key Points to Note**

1. **Dynamic Color Changes**
   * When `IsToggled` is **true**, the button uses `ToggledBorderColor`; otherwise, it uses `UntoggledBorderColor`.
2. **Variable Styles with `BorderStyleOption`**
   * The `BorderStyleOptions` enum includes a range of style choices: `Solid`, `Dashed`, `Dotted`, `Double`, `3D`, and more.
   * Some styles (e.g., `Hidden`) effectively remove or minimize the visible border.
3. **Border Thickness**
   * A larger `BorderThickness` value visually emphasizes the control.
   * A very thin border can create a minimalist look but may reduce clarity in differentiating the button’s boundaries.
4. **Pen Settings**
   * Internally, the control uses a `Pen` object to draw the border, applying the specified style and thickness.
   * In some styles (e.g., `Double` or `3D` variants), width or additional rendering effects may be simulated by automatically increasing the pen’s width.

***

### **Usage Example**

#### **Configuring Borders in Code**

```csharp
// Assume you have a SiticoneToggleButton named myToggle

// Make the border thicker for a prominent outline
myToggle.BorderThickness = 2.5f;

// Choose a dashed style for a casual or dynamic look
myToggle.BorderStyleOption = SiticoneToggleButton.BorderStyleOptions.Dashed;

// Set the border colors for On/Off states
myToggle.ToggledBorderColor = Color.MediumSlateBlue;
myToggle.UntoggledBorderColor = Color.DarkGray;

// Optional: Switch to a different border style depending on user interactions
myToggle.StateChanged += (s, e) =>
{
    if (myToggle.IsToggled)
    {
        // Make the border more visible when toggled on
        myToggle.BorderStyleOption = SiticoneToggleButton.BorderStyleOptions.SolidDouble;
    }
    else
    {
        // Subtle border when toggled off
        myToggle.BorderStyleOption = SiticoneToggleButton.BorderStyleOptions.Dotted;
    }
};
```

> **Tip:** Experiment with various border styles from the `BorderStyleOptions` enum to see which best fits your UI theme.

***

### **Best Practices to Create Beautiful UI and Apps**

| **Practice**                                                                                   | **Reason**                                                                                    |
| ---------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| Match **border color** to the toggle state’s **background** color.                             | Ensures visual consistency and indicates active/inactive states more clearly.                 |
| Use a **thinner border** if the overall design is minimalistic, or a thicker one for emphasis. | Maintains a cohesive look with the rest of your application’s design.                         |
| Use **high contrast** between the border and the button background.                            | Improves visibility and clarity for all users, including those with low vision.               |
| Select a **border style** that complements your UI theme.                                      | For modern, flat designs, use `Solid`; for more playful UI, experiment with dashed or dotted. |
| Consider dynamic changes to **border style** upon toggling for extra feedback.                 | Reinforces state changes and enhances user engagement.                                        |

***

### **Common Pitfalls and Design Considerations**

| **Pitfall**                                                                              | **Mitigation / Recommendation**                                                                       |
| ---------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
| Setting a very **large BorderThickness** with certain styles (e.g., **Double**, **3D**). | Can look oversized or break the control’s layout. Stay within a suitable thickness range (1–4 px).    |
| Using **invisible** or **hidden** styles unintentionally.                                | Double-check your **BorderStyleOption** to ensure you haven’t accidentally set a style like `Hidden`. |
| Overusing **3D** or **Double** effects in modern/flat UIs.                               | Might clash with a flat theme; use these styles where they fit the broader design context.            |
| Forgetting to specify **ToggledBorderColor** and **UntoggledBorderColor** distinctly.    | Could make the toggle states look identical, reducing clarity on whether the button is On or Off.     |

***

### **Review and Summary**

* **What You Learned**:\
  How to control the button’s outline—its thickness, color, and style—using a straightforward set of properties and an enum.
* **Why It’s Important**:\
  Borders can significantly influence both readability and aesthetics. With appropriately chosen colors and styles, your toggle button stands out clearly or blends seamlessly into your application’s design.
* **How to Move Forward**:\
  Combine these border settings with other appearance options (e.g., **Appearance & Text** configuration) to create a consistent, engaging user experience. Make sure to test your chosen styles across different screen sizes and color themes.

By leveraging the **Border Settings** feature effectively, you can achieve both subtle and bold designs, ensuring your toggles align with the overall style of your application.