# Borders
## 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 %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.dikesoft.com/fundamentals/grid-structure/borders.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.