> 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

## 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.

![Floating Configuration Panel - Appearance](/files/yj1vCd6ZqdMwO1MT5eYm)

![DikeGrid Border](/files/ihi0xUmzhKNPX3ZQgSpI)

{% 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 <mark style="color:blue;">`BORDER_WIDTH`</mark>.

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 %}

![DikeGrid with a thicker border.](/files/A93hpVPuyMI27hSdPFZQ)

## Borders for column moving

If we inspect the DikeGrid instance through the Chrome DevTools, we see the following structure:

![DikeGrid Border Gap](/files/5ut45PRclthZ0t1KRypx)

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
<dike-grid id="grid-structure"
    [allowColumnDragging]="gridProperties.allowColumnDragging">
</dike-grid>
```

{% endcode %}

Open the [Floating Configuration Panel](/overview.md#floating-configuration-panel), go to the **Dragging** section, and check the **Allow Column Dragging** checkbox.

![Floating Configuration Panel - Dragging](/files/si6LD6N6IAjwyDxhrXXZ)

Now you can grab the **Gender** column, for example, and drag it to the left or right panel.

![DikeGrid - Left Border](/files/kwKRVNSZzB6ZFaOyl62t)

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 <mark style="color:blue;">`BORDER_GAP`</mark>.

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.

![Border Gap with 35 pixels in width](/files/7yB0ze2ri8Bl2B1wUHpm)

{% hint style="warning" %}
Be aware that the drawn line when a column is dragging must fit in the Border Gap.
{% endhint %}