# Configure Cell Borders

## Content

In SpreadJS Designer, you can configure cell borders from the **Border** tab in the **Format Cells** dialog. The Border tab allows you to set border line style, color, presets, individual border sides, and border radius.
Use border radius when you want cells or ranges to render as rounded rectangular sections, such as grouped report blocks, form sections, or dashboard panels.

## Open the Border Settings

You can open the Border tab from either of the following locations:

* On the ribbon, go to **Home** \> **Font** \> **Borders** \> **More Borders**.
    ![SpreadJS Designer Home tab with the Borders menu open, showing the More Borders command developers use to access advanced cell border settings.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260717.f18010.png?width=800)
* Right-click a worksheet cell, range, or header area, and then select **Format Cells** \> **Border**.
    ![SpreadJS Designer worksheet context menu showing the Format Cells command used to open border settings for a selected cell, range, or header area.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260717.c92ba7.png?width=250)

The Border tab contains settings for border lines, presets, preview, and radius.
![SpreadJS Designer Format Cells dialog on the Border tab, containing line style, color, preset, preview, individual border, and radius controls.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260717.4ce82f.png?width=400)

## Preview Borders and Radius

The preview diagram in the center of the Border tab shows the current border configuration.
![SpreadJS Designer Border tab preview diagram reflecting the selected line styles, border positions, presets, corner radius values, and Apply to scope.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260717.97d168.png?width=600)
It reflects changes made from:

* line style and color
* border presets
* individual border buttons
* border radius values
* Radius **Apply to** mode

## Set Border Line Style and Color

Use the **Line** area to choose the border line style and color.
![SpreadJS Designer Border tab Line area where developers select a line pattern and color before applying borders to worksheet cells.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260717.a4fa6c.png?width=600)
After selecting a line style and color, apply it by using one of the following controls:

* **Presets** apply common border combinations, such as **None**, **Outline**, and **Inside**.
* Border buttons around the preview diagram apply the selected line to specific border positions, such as outside borders, inside borders, or diagonal borders.
* The preview diagram in the center shows the current border result and can also be used to apply border lines.

![SpreadJS Designer animation demonstrates selecting a border line style and color, applying it with border controls, and reviewing the result in the preview diagram.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/demo-20260717.89bdcb.gif?width=800)

## Apply Border Presets

The **Presets** area provides quick border configurations for the selected cell or range.

| Preset | Description |
| ------ | ----------- |
| None | Removes the border lines from the selected target. |
| Outline | Applies borders to the outer edges of the selected target. |
| Inside | Applies borders to the inside lines of the selected range. |

![SpreadJS Designer animation compares None, Outline, and Inside border presets for a selected cell range while the Border tab preview updates.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/preset-20260717.5bc962.gif?width=800)

>type=note
> The **Inside** preset is meaningful for a range because it applies borders between cells in the selected range. It does not control border radius. To configure rounded corners, use the **Radius** group.

## Configure Border Radius

The **Radius** group controls rounded corners for the selected cell, range, or supported style surface.
![SpreadJS Designer Radius group providing Apply to scope, four corner value editors, and a link control for configuring rounded worksheet borders.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260717.583858.png?width=600)
Border radius is applied independently from border line presets. For example, you can use **Outline** or **Inside** to set border lines, and then use the **Radius** group to control how rounded corners are applied.
The Radius group includes:

| Area | Description |
| ---- | ----------- |
| Apply to | Defines the target scope of the current radius operation. |
| Corner | Provides editors for top-left, top-right, bottom-right, and bottom-left radius values. |
| Link button | Links or unlinks the four corner values. |

![SpreadJS Designer animation demonstrates editing linked or independent corner radius values and viewing the resulting rounded border in the preview diagram.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/radius-20260717.820c6c.gif?width=800)

### Apply To Modes

The **Apply to** setting controls how the current radius value is applied to the selected target. It is an editing command and is not stored as a separate shape state.

| Mode | Description |
| ---- | ----------- |
| None | Disables rounded corners for the current operation. The corner editors show zero and are disabled. |
| All | Applies the radius to all applicable corners in the selected cell or range. For a multi-cell range, each cell can display rounded corners according to the applied border geometry. |
| Outer | Applies the radius to the outer contour of the selected range. |

When the dialog is opened, **Outer** is used as the initial editing scope. The editor displays the current radius values for the outer corners.
![SpreadJS Designer animation compares None, All, and Outer Apply to modes for controlling how a radius edit affects cells within a selected worksheet range.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/applyTo-20260717.7c1b88.gif?width=800)

>type=warning
> Changing **Apply to** only changes the scope of the next radius edit. It does not indicate how the existing radius values were originally created.

![SpreadJS Designer animation demonstrates that changing the Apply to mode controls the next radius edit without identifying or replacing previously stored corner values.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/note-20260717.a8993a.gif?width=800)

### Edit Corner Values

Each corner editor accepts a non-negative integer value.

* Empty values are treated as `0`.
* Negative values are not supported.
* Decimal values are not supported.
* Units and percentages are not supported.

When linked editing is enabled, changing any corner value applies the same value to all four corners.
When linked editing is disabled, each corner value can be edited independently.

## Supported Style Surfaces

The Radius editor is available in supported dialogs that edit cell style information.

| Surface | Behavior |
| ------- | -------- |
| Worksheet Format Cells | Applies radius changes to the selected cell, range, or header area. |
| Cell Styles | Saves valid radius values to the style definition. |
| Conditional Formatting custom format | Saves radius values to the rule style. |
| Cell States | Saves radius values for the selected state style. |
| Named Cell Template styles | Preserves radius values as part of the template style. |
| TableSheet and Data Manager style surfaces | Supports radius where the surface edits a compatible cell style. |
| ReportSheet style surfaces | Supports radius where the surface edits a compatible report style. |

>type=note
> **Note:** Availability may depend on whether the specific dialog edits a cell style or compatible style option.

## PivotTable Selection Behavior

When the selected worksheet range intersects a PivotTable, Designer applies border radius through PivotTable style targets.

* **All** applies the complete radius value to each resolved PivotTable style area in the selection.
* **Outer** applies radius only to the outer corner positions of the original worksheet selection that are inside the PivotTable page or content range.

The **Apply to** setting controls how Designer applies the current editing operation. It is not stored as part of the PivotTable style and does not control how the PivotTable is rendered later.

## Limitations

The following limitations apply when configuring border radius in Designer:

* Radius values support non-negative integers only.
* Units, percentages, negative values, and decimal precision are not supported.
* Existing invalid `borderRadius` values do not prevent the dialog from opening. Designer displays them as zero-radius values.
* Some header, layout, and border combinations that are not supported by the runtime border renderer remain unsupported in Designer.