# Chart Borders

## Content



Adding a border to part of the chart can help highlight important information, or simply make the chart look more attractive. The border style, color, rounding, and width can be set using the respective properties: [BorderStyle](/componentone/api/win/online-chart2d/dotnet-framework-api/C1.Win.C1Chart.4.8/C1.Win.C1Chart.Border.BorderStyle.html), [Color](/componentone/api/win/online-chart2d/dotnet-framework-api/C1.Win.C1Chart.4.8/C1.Win.C1Chart.Border.Color.html), [Rounding](/componentone/api/win/online-chart2d/dotnet-framework-api/C1.Win.C1Chart.4.8/C1.Win.C1Chart.Border.Rounding.html), and [Thickness](/componentone/api/win/online-chart2d/dotnet-framework-api/C1.Win.C1Chart.4.8/C1.Win.C1Chart.Border.Thickness.html). Using these properties you can create customized borders for any of the following chart elements:

*   Header and Footer titles
*   Legend
*   ChartArea
*   The entire chart

The following table defines and illustrates the effect of each value in the [BorderStyleEnum](/componentone/api/win/online-chart2d/dotnet-framework-api/C1.Win.C1Chart.4.8/C1.Win.C1Chart.BorderStyleEnum.html):

| **Member name** | **Description** | **Effect** |
| --- | --- | --- |
| **NotSet** | Border style is not set and is inherited from C1Chart class. |  |
| **None** | No border. |  |
| **Empty** | Empty border. |  |
| **Solid** | Solid line border. | ![](https://cdn.mescius.io/document-site-files/images/70bd33a2-280e-4cc3-a1c0-7b827eceb8aa/imagesext/image9_225.png) |
| **Raised** | Raised 3D border, drawn using system colors. | ![](https://cdn.mescius.io/document-site-files/images/70bd33a2-280e-4cc3-a1c0-7b827eceb8aa/imagesext/image9_226.png) |
| **Inset** | Inset 3D border with bevel. | ![](https://cdn.mescius.io/document-site-files/images/70bd33a2-280e-4cc3-a1c0-7b827eceb8aa/imagesext/image9_227.png) |
| **RaisedBevel** | Raised 3D border with bevel. | ![](https://cdn.mescius.io/document-site-files/images/70bd33a2-280e-4cc3-a1c0-7b827eceb8aa/imagesext/image9_228.png) |
| **InsetBevel** | Inset 3D border with bevel. | ![](https://cdn.mescius.io/document-site-files/images/70bd33a2-280e-4cc3-a1c0-7b827eceb8aa/imagesext/image9_229.png) |
| **Groove** | Compound border (inset+raised). | ![](https://cdn.mescius.io/document-site-files/images/70bd33a2-280e-4cc3-a1c0-7b827eceb8aa/imagesext/image9_230.png) |
| **Fillet** | Compound border (raised+inset). | ![](https://cdn.mescius.io/document-site-files/images/70bd33a2-280e-4cc3-a1c0-7b827eceb8aa/imagesext/image9_231.png) |
| **Double** | Double solid line border. | ![](https://cdn.mescius.io/document-site-files/images/70bd33a2-280e-4cc3-a1c0-7b827eceb8aa/imagesext/image9_232.png) |
| **Dashed** | Dashed line border. | ![](https://cdn.mescius.io/document-site-files/images/70bd33a2-280e-4cc3-a1c0-7b827eceb8aa/imagesext/image9_233.png) |
| **Opaque** | The opaque border style ensures that anti-aliasing is turned off when drawing the border. Opaque borders ignore **Rounding** settings. This border style can be useful for generating chart images to be use with transparent backgrounds. |  |

The border properties can be modified at design time using the [Chart Properties](/componentone/docs/win/online-chart2d/designtimetoolsforcr/workingwiththechartp) designer, Properties window, or [Chart Smart Designer](/componentone/docs/win/online-chart2d/designtimetoolsforcr/workingwiththesmartd). These properties are located under the **Style** nodes in the Visual Studio Properties window, which can be found on the Control, ChartArea, Titles, Legend, and ChartLabels objects.

### To change the border style of the ChartArea at design time

To change the border style of the ChartArea element at design time using the Visual Studio Properties window, complete the following:

1.  Expand the **ChartArea** node in the c1Chart1 properties window.
2.  Expand the **Style->Border** property.
3.  Click on the dropdown arrow next to the **BorderStyle** property and select a border style, for example **Dashed**.

### To change the border style of the ChartArea programatically

DOC-DETAILS-TAG-OPEN

DOC-SUMMARY-TAG-OPEN

To write code in Visual Basic

DOC-SUMMARY-TAG-CLOSE

```vbnet
C1Chart1.ChartArea.Style.Border.BorderStyle = BorderStyleEnum.Dashed
```

DOC-DETAILS-TAG-CLOSE

DOC-DETAILS-TAG-OPEN

DOC-SUMMARY-TAG-OPEN

To write code in C#

DOC-SUMMARY-TAG-CLOSE

```csharp
C1Chart1.ChartArea.Style.Border.BorderStyle = BorderStyleEnum.Dashed;
```

DOC-DETAILS-TAG-CLOSE

The dashed border appears around the ChartArea element like the following:

![](https://cdn.mescius.io/document-site-files/images/70bd33a2-280e-4cc3-a1c0-7b827eceb8aa/imagesext/image9_234.png)

## See Also

[Chart Fonts](/componentone/docs/win/online-chart2d/customizingchartelem/chartfonts)