> For the complete documentation index, see [llms.txt](https://docs.dikesoft.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dikesoft.com/fundamentals/grid-structure/borders.md).
# Borders
The DikeGrid itself draws a border through its primary container. However, Borders concept is essential for column moving.
## DikeGrid Border
When you disable the material elevation for the DikeGrid, it draws a line in its primary internal container.
Open the [Floating Configuration Panel](/overview.md#floating-configuration-panel), go to the **Appearance** section, and uncheck the **MatElevation** checkbox.
{% hint style="info" %}
By default, the border is **one-pixel** in width.
{% endhint %}
### Border width
You can change the border width by providing an Injection Token called `BORDER_WIDTH`.
Let us give the DikeGrid instance this Injection Token at the module level.
{% code title="structure.module.ts" %}
```typescript
@NgModule({
providers: [
{ provide: BORDER_WIDTH, useValue: 3 }
]
})
export class StructureModule { }
```
{% endcode %}
## Borders for column moving
If we inspect the DikeGrid instance through the Chrome DevTools, we see the following structure:
The inner container highlighted with yellow is the primary container for the DikeGrid. However, there is another outer container highlighted with pink color.
The outer container creates a space between the DikeGrid definition and its external boundary. When a column moves and tries to add to the left or right panel, this space draws a line with the accent color.
{% hint style="info" %}
Internally, the space between the DikeGrid and its external boundary is called **Border Gap**.
{% endhint %}
To see how the DikeGrid draws this line, let us allow column dragging for the DikeGrid instance.
{% hint style="success" %}
Remember that **Age** and **Gender** columns are draggable, but the DikeGrid instance that contains them must allow column dragging. See the **Column Moving** section for more details.
{% endhint %}
Let us bind the related property from the `gridProperties` object to allow column dragging.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
Open the [Floating Configuration Panel](/overview.md#floating-configuration-panel), go to the **Dragging** section, and check the **Allow Column Dragging** checkbox.
Now you can grab the **Gender** column, for example, and drag it to the left or right panel.
See how the column icon changes to a ***pin icon***, indicating that the user will add the column to the **left panel**.
{% hint style="info" %}
The drawn line is **5 pixels** in width. Nevertheless, if the provided border width exceeds 5 pixels, the drawn line will be the same as the border.
{% endhint %}
### Changing the Border Gap width
The Border Gap has **15 pixels** in width by default. However, you can reduce or increase this gap by providing an Injection Token called `BORDER_GAP`.
Let us give the DikeGrid instance this Injection Token at the module level.
{% code title="structure.module.ts" %}
```typescript
@NgModule({
providers: [
{ provide: BORDER_WIDTH, useValue: 3 },
{ provide: BORDER_GAP, useValue: 35 }
]
})
export class StructureModule { }
```
{% endcode %}
We gave the DikeGrid an exaggerated value of **35 pixels** to see the difference.
{% hint style="warning" %}
Be aware that the drawn line when a column is dragging must fit in the Border Gap.
{% endhint %}