---
title: "Theming API: Customising Borders"
framework: vue
version: "36.1.0"
---

# Theming API: Customising Borders

Control the borders around rows, cells and UI elements.

Borders are controlled using theme parameters ending `Border`. See the [Borders section](https://www.ag-grid.com/vue-data-grid/theming-api/#reference-borders) of the parameters reference for the core border parameters, or search "border" in the "All Parameters" section of the [Theme Builder](https://www.ag-grid.com/theme-builder/) for a full list of border parameters.

The most important parameters relating to borders are:

- `borderColor` and `borderWidth` - sets the default color and width for all borders, which can be overridden for individual borders using the parameters below
- `rowBorder` and `headerRowBorder` - sets the horizontal borders between rows in the grid and header
- `columnBorder` and `headerColumnBorder` - sets the vertical borders between columns in the grid and header
- `wrapperBorder` - sets the border around the grid itself

## Example: row borders

```js
const myTheme = themeQuartz.withParams({
    wrapperBorder: false,
    headerRowBorder: false,
    rowBorder: { style: 'dotted', width: 3, color: '#9696C8' },
    columnBorder: { style: 'dashed', color: '#9696C8' },
});
```

#### Border Customisation

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  AllCommunityModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  Theme,
  enableDevValidations,
  themeQuartz,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([AllCommunityModule]);

const myTheme = themeQuartz.withParams({
  borderColor: "#9696C8",
  wrapperBorder: false,
  headerRowBorder: false,
  rowBorder: { style: "dotted", width: 3 },
  columnBorder: { style: "dashed" },
});

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :theme="theme"
      :columnDefs="columnDefs"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const theme = ref<Theme | "legacy">(myTheme);
    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 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,
      columnDefs,
      rowData,
      onGridReady,
    };
  },
});

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

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

### Borders between header cells

Column borders between header cells have adjustable height, and there is also the option of styling the resize handle which is only present on resizable columns. See [Customising Headers](https://www.ag-grid.com/vue-data-grid/theming-headers/) for more information.