> 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-phonenumberbox/corner-and-fill-config.md).

# Corner and Fill Config

This feature enables developers to tailor the control’s outer shape and background appearance by adjusting the corner radii and fill properties, resulting in a refined and modern user interface.

## Overview

The Corner & Fill Customization feature is managed through a series of public properties that allow you to define how the control’s corners are rounded and how its background is rendered. These properties provide control over both a solid background and a gradient fill, enabling you to achieve a variety of visual styles.

| Property                | Type               | Default    | Description                                                                                  |
| ----------------------- | ------------------ | ---------- | -------------------------------------------------------------------------------------------- |
| CornerRadiusTopLeft     | int                | 0          | Defines the rounding radius for the top-left corner of the control.                          |
| CornerRadiusTopRight    | int                | 0          | Defines the rounding radius for the top-right corner of the control.                         |
| CornerRadiusBottomLeft  | int                | 0          | Defines the rounding radius for the bottom-left corner of the control.                       |
| CornerRadiusBottomRight | int                | 0          | Defines the rounding radius for the bottom-right corner of the control.                      |
| UseFillGradient         | bool               | false      | Specifies whether the background is filled with a gradient instead of a solid color.         |
| FillColor1              | Color              | White      | The primary color used for the background fill or as the starting color for a gradient fill. |
| FillColor2              | Color              | White      | The secondary color used for the background gradient fill when UseFillGradient is enabled.   |
| FillGradientMode        | LinearGradientMode | Horizontal | Determines the direction (e.g., Horizontal, Vertical) of the gradient fill when enabled.     |

***

### Key Points

| Aspect               | Detail                                                                                                                                                   |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Corner Customization | CornerRadiusTopLeft, CornerRadiusTopRight, CornerRadiusBottomLeft, and CornerRadiusBottomRight allow for independent control of each corner's roundness. |
| Fill Options         | UseFillGradient toggles between a solid background (using FillColor1) and a gradient background (using FillColor1, FillColor2, and FillGradientMode).    |
| Visual Impact        | Adjusting the corner radii and fill settings can dramatically change the control’s appearance, making it either sharp and modern or soft and rounded.    |

***

### Best Practices

| Practice                         | Explanation                                                                                                                                |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| Maintain Consistent Corner Radii | Use similar values for all four corners for a uniform look unless a specific design calls for asymmetric rounding.                         |
| Use Gradients to Enhance Depth   | Enable UseFillGradient with complementary FillColor1 and FillColor2 values to create a subtle depth effect that matches your theme.        |
| Balance Solid and Gradient Fills | Choose a solid fill when simplicity is desired and a gradient fill when you wish to add visual complexity without overwhelming the design. |
| Test on Different Resolutions    | Verify that the corner radii and fill effects look good on different screen sizes and resolutions to ensure consistent appearance.         |

***

### Common Pitfalls

| Pitfall                                             | How to Avoid                                                                                                                                        |
| --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| Over-Rounded Corners Causing Layout Issues          | Avoid setting excessively high values for corner radii that may reduce the usable content area or distort the control’s proportions.                |
| Inconsistent Fill Colors Leading to Clashing Themes | Ensure that FillColor1 and FillColor2 complement each other and the overall color scheme of your application.                                       |
| Ignoring Gradient Direction Impact                  | Test different FillGradientMode settings to confirm that the gradient direction aligns with your design expectations.                               |
| Manual Padding Interference                         | Let the control handle text padding adjustments automatically when using the corner customization features, unless explicit overrides are required. |

***

### Usage Scenarios

| Scenario                           | Example Use Case                                                                                                                               |
| ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| Modern Rounded Controls            | Set all corner radii to a non-zero value (e.g., 10) for a soft, rounded look that appeals to modern UI design trends.                          |
| Subtle Gradient Backgrounds        | Enable UseFillGradient with harmonious FillColor1 and FillColor2 values to create a smooth gradient background for enhanced depth.             |
| Distinct Visual Sections           | Customize corner radii to emphasize particular edges (for example, only rounding the top corners) to indicate a header section.                |
| Theme-Dependent Fill Customization | Dynamically update FillColor1, FillColor2, and FillGradientMode based on the current theme (e.g., light or dark mode) to maintain consistency. |

***

### Code Examples

Example 1: Basic Rounded Corners with Solid Fill\
This sample demonstrates setting uniform rounded corners with a solid background fill.

```csharp
// Instantiate the control
SiticonePhoneNumberBox phoneNumberBox = new SiticonePhoneNumberBox();

// Set uniform rounded corners for a modern look
phoneNumberBox.CornerRadiusTopLeft = 10;
phoneNumberBox.CornerRadiusTopRight = 10;
phoneNumberBox.CornerRadiusBottomLeft = 10;
phoneNumberBox.CornerRadiusBottomRight = 10;

// Use a solid fill with a custom color
phoneNumberBox.UseFillGradient = false;
phoneNumberBox.SolidFillColor = Color.White;  // This property is used when gradients are not enabled

// Set location and size, then add the control to the form
phoneNumberBox.Location = new Point(20, 20);
phoneNumberBox.Size = new Size(250, 40);
this.Controls.Add(phoneNumberBox);
```

Example 2: Gradient Fill with Custom Gradient Direction\
This sample shows how to enable a gradient background with a horizontal transition.

```csharp
SiticonePhoneNumberBox phoneNumberBox = new SiticonePhoneNumberBox();

// Set corner radii to achieve a rounded look
phoneNumberBox.CornerRadiusTopLeft = 8;
phoneNumberBox.CornerRadiusTopRight = 8;
phoneNumberBox.CornerRadiusBottomLeft = 8;
phoneNumberBox.CornerRadiusBottomRight = 8;

// Enable gradient fill and configure colors and direction
phoneNumberBox.UseFillGradient = true;
phoneNumberBox.FillColor1 = Color.LightBlue;
phoneNumberBox.FillColor2 = Color.White;
phoneNumberBox.FillGradientMode = LinearGradientMode.Horizontal;

// Set location and size on the form
phoneNumberBox.Location = new Point(20, 80);
phoneNumberBox.Size = new Size(250, 40);
this.Controls.Add(phoneNumberBox);
```

Example 3: Asymmetric Corners for a Unique Design\
This example demonstrates how to use different corner radii for each corner to create a unique control shape.

```csharp
SiticonePhoneNumberBox phoneNumberBox = new SiticonePhoneNumberBox();

// Set asymmetric corner radii for a custom shape
phoneNumberBox.CornerRadiusTopLeft = 5;
phoneNumberBox.CornerRadiusTopRight = 15;
phoneNumberBox.CornerRadiusBottomLeft = 15;
phoneNumberBox.CornerRadiusBottomRight = 5;

// Use a solid background fill
phoneNumberBox.UseFillGradient = false;
phoneNumberBox.SolidFillColor = Color.Beige;

// Position the control and add it to the form
phoneNumberBox.Location = new Point(20, 140);
phoneNumberBox.Size = new Size(250, 40);
this.Controls.Add(phoneNumberBox);
```

***

### Review

| Aspect              | Review Comment                                                                                                                                            |
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Versatility         | The properties offer a wide range of customization options for both the control's shape (via corner radii) and background appearance (via fill settings). |
| Design Impact       | Adjusting the corners and fill can dramatically alter the control’s visual appeal, enabling designs that range from minimalist to highly stylized.        |
| Ease of Integration | The provided code examples show straightforward integration into a WinForms application, making it easy to achieve the desired aesthetic.                 |

***

### Summary

The Corner & Fill Customization feature of the SiticonePhoneNumberBox control empowers developers to refine the control's visual appearance by adjusting the corner radii and background fill options. Whether you opt for a solid color or a gradient background, and whether you choose uniform or asymmetric corner rounding, this feature provides the flexibility to create a modern, cohesive design that fits seamlessly into your application's UI.

***

### Additional Notes

| Note Type        | Detail                                                                                                                                                       |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Extensibility    | The corner and fill properties can be dynamically updated at runtime, allowing for adaptive designs based on user interaction or theme changes.              |
| Integration Tips | Coordinate these visual customization settings with border, shadow, and text properties to ensure a harmonious overall design.                               |
| Debugging        | Verify that changes to corner radii and fill properties correctly update the control’s appearance by testing across different control sizes and resolutions. |