---
product: "AG Grid"
title: "Theming API: Customising Borders & Scrollbars"
description: "Control the borders around rows, cells and UI elements, and the appearance of scrollbars."
framework: vue
version: "36.3.0"
related:
    - title: "Overview"
      url: "https://www.ag-grid.com/archive/36.3.0/vue-data-grid/theming/"
    - title: "Built-in Themes"
      url: "https://www.ag-grid.com/archive/36.3.0/vue-data-grid/themes/"
    - title: "Theme Parameters"
      url: "https://www.ag-grid.com/archive/36.3.0/vue-data-grid/theming-parameters/"
    - title: "Theme Parts"
      url: "https://www.ag-grid.com/archive/36.3.0/vue-data-grid/theming-parts/"
    - title: "Colors & Dark Mode"
      url: "https://www.ag-grid.com/archive/36.3.0/vue-data-grid/theming-colors/"
    - title: "Fonts"
      url: "https://www.ag-grid.com/archive/36.3.0/vue-data-grid/theming-fonts/"
    - title: "Compactness & Row Height"
      url: "https://www.ag-grid.com/archive/36.3.0/vue-data-grid/theming-compactness/"
    - title: "Selections"
      url: "https://www.ag-grid.com/archive/36.3.0/vue-data-grid/theming-selections/"
    - title: "Headers"
      url: "https://www.ag-grid.com/archive/36.3.0/vue-data-grid/theming-headers/"
    - title: "Icons"
      url: "https://www.ag-grid.com/archive/36.3.0/vue-data-grid/custom-icons/"
    - title: "Master Detail"
      url: "https://www.ag-grid.com/archive/36.3.0/vue-data-grid/theming-master-detail/"
    - title: "Tool Panels"
      url: "https://www.ag-grid.com/archive/36.3.0/vue-data-grid/theming-tool-panels/"
    - title: "Inputs & Widgets"
      url: "https://www.ag-grid.com/archive/36.3.0/vue-data-grid/theming-widgets/"
    - title: "Menus & Popups"
      url: "https://www.ag-grid.com/archive/36.3.0/vue-data-grid/theming-popups/"
    - title: "Extending with CSS"
      url: "https://www.ag-grid.com/archive/36.3.0/vue-data-grid/theming-css/"
    - title: "Theme Builder"
      url: "https://www.ag-grid.com/archive/36.3.0/vue-data-grid/theming-theme-builder/"
    - title: "Distributing Shared Themes"
      url: "https://www.ag-grid.com/archive/36.3.0/vue-data-grid/theming-distribution/"
    - title: "Migration from v32"
      url: "https://www.ag-grid.com/archive/36.3.0/vue-data-grid/theming-migration/"
    - title: "Legacy Themes"
      url: "https://www.ag-grid.com/archive/36.3.0/vue-data-grid/theming-v32/"
llms: "https://www.ag-grid.com/archive/36.3.0/llms.txt"
---

# Theming API: Customising Borders & Scrollbars

Control the borders around rows, cells and UI elements, and the appearance of scrollbars.

Borders are controlled using theme parameters ending `Border`. See the [Borders section](https://www.ag-grid.com/archive/36.3.0/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/archive/36.3.0/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") {
  // Enable extended validations only for development
  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/archive/36.3.0/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/archive/36.3.0/vue-data-grid/theming-headers/) for more information.

### Grand total row border

The `grandTotalRowBorder` theme parameter sets the border between the grand total row and the data rows. See [Enabling a Grand Total Row](https://www.ag-grid.com/archive/36.3.0/vue-data-grid/aggregation-total-rows/#enabling-a-grand-total-row) for an example.

## Scrollbars

By default the grid uses the browser's native scrollbars. These parameters change scrollbars throughout the grid, including those in tool panels and filters:

- `scrollbarThumbColor` and `scrollbarTrackColor` - setting BOTH of these will change the colour of the draggable scroll thumb and of the track behind it. Setting only one will have no effect.
- `scrollbarWidth` - set to `'thin'` for narrow scrollbars or `'auto'` for the browser default.
- `bodyScrollbarBorder` - on browsers that always show scrollbars, this sets the border between the grid's main scrollbars and the cells.

```js
const myTheme = themeQuartz.withParams({
    scrollbarThumbColor: '#9696C8',
    scrollbarTrackColor: 'transparent',
    scrollbarWidth: 'thin',
    bodyScrollbarBorder: { color: '#9696C8' },
});
```

This example also opens the Filters Tool Panel with a Set Filter, so you can see the scrollbar styles applied to other scrolling elements in the grid:

#### Scrollbar Customisation

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  GridState,
  ModuleRegistry,
  NewFiltersToolPanelState,
  SideBarDef,
  Theme,
  enableDevValidations,
  themeQuartz,
} from "ag-grid-community";
import { AllEnterpriseModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([AllEnterpriseModule]);

const myTheme = themeQuartz.withParams({
  scrollbarThumbColor: "#9696C8",
  scrollbarTrackColor: "transparent",
  scrollbarWidth: "thin",
  bodyScrollbarBorder: { color: "#9696C8" },
});

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :theme="theme"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :sideBar="sideBar"
      :enableFilterHandlers="true"
      :initialState="initialState"
      :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 defaultColDef = ref<ColDef>({
      filter: true,
    });
    const sideBar = ref<SideBarDef | string | string[] | boolean | null>(
      "filters-new",
    );
    const initialState = ref<GridState>({
      sideBar: {
        visible: true,
        position: "right",
        openToolPanel: "filters-new",
        toolPanels: {
          "filters-new": {
            filters: [{ colId: "country", expanded: true }],
          } as NewFiltersToolPanelState,
        },
      },
    });
    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,
      defaultColDef,
      sideBar,
      initialState,
      rowData,
      onGridReady,
    };
  },
});

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

[Live example: Scrollbar Customisation](https://www.ag-grid.com/archive/36.3.0/examples/theming-borders/scrollbar-customisation/vue3/)