---
title: "Legacy Themes: Customising Borders"
framework: vue
version: "36.1.0"
---

# Legacy Themes: Customising Borders

Control the borders around rows, cells and UI elements.

> **Note**
>
> This page describes the grid's legacy theming system that was the default in v32 and before, for the benefit of applications that have not yet migrated to the Theming API. These themes are deprecated and will be removed in a future major version. You may want to visit the [new theming docs](https://www.ag-grid.com/vue-data-grid/theming-borders/) or check out the [migration guide](https://www.ag-grid.com/vue-data-grid/theming-migration/).

The grid exposes many variables for customising borders. For each kind of border, the style and colour are controlled by two different variables. For a given kind of border, `--ag-borders-{kind}` should be set to a CSS border style and width (e.g. `solid 1px`) or `none` to disable; and `--ag-{kind}-border-color` can be set to a CSS border color e.g. `red`.

These variables use [Variable Cascading](https://www.ag-grid.com/vue-data-grid/theming-v32-customisation-css/#variable-cascading) to allow you to enable/disable all borders quickly or fine tune the borders shown. In the list below, setting a parent item in the list will set the default value for all children:

- `--ag-borders` and `--ag-border-color` - the master control for all borders in the grid
  - `--ag-borders-critical` and `--ag-critical-border-color` - borders that are important for UX even on grids without many borders - for example to differentiate pinned from regular columns. Themes that disable borders generally may want to enable these borders
  - `--ag-borders-secondary` and `--ag-secondary-border-color` - borders separating UI elements within components.
    - `--ag-borders-input` and `--ag-secondary-border-row` - borders around text inputs
- `--ag-row-border-style`, `--ag-row-border-color` and `--ag-row-border-width` - borders separating the grid rows. Row borders are configured independently of other border properties.
- `--ag-cell-horizontal-border` - borders between horizontally adjacent cells (i.e. between columns). This accepts a style and a color, e.g. `solid black`.

## Example: row borders

```css
.ag-theme-quartz {
    /* disable all borders */
    --ag-borders: none;
    /* then add back a border between rows */
    --ag-row-border-style: dashed;
    --ag-row-border-width: 5px;
    --ag-row-border-color: rgb(150, 150, 200);
    /* and between columns */
    --ag-cell-horizontal-border: solid rgb(150, 150, 200);
}
```

#### Border Customisation

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-quartz.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberEditorModule,
  NumberFilterModule,
  TextEditorModule,
  Theme,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  RowGroupingModule,
  SetFilterModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  NumberEditorModule,
  TextEditorModule,
  NumberFilterModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
  SetFilterModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      class="ag-theme-quartz"
      @grid-ready="onGridReady"
      :theme="theme"
      :rowData="rowData"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const theme = ref<Theme | "legacy">("legacy");
    const columnDefs = ref<ColDef[]>([
      { field: "athlete", minWidth: 170 },
      { field: "age" },
      { field: "country" },
      { field: "year" },
      { field: "date" },
      { field: "sport" },
      { field: "gold" },
      { field: "silver" },
      { field: "bronze" },
      { field: "total" },
    ]);
    const defaultColDef = ref<ColDef>({
      editable: true,
      filter: true,
    });
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      theme,
      rowData,
      columnDefs,
      defaultColDef,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Border Customisation](https://www.ag-grid.com/examples/theming-v32-customisation-borders/border-customisation/vue3)

### Borders between header cells

`--ag-cell-horizontal-border` adds a border between cells in the grid area. To add a border between header cells, use [header column separators](https://www.ag-grid.com/vue-data-grid/theming-v32-customisation-headers/#header-column-separators-and-resize-handles).