---
title: "Legacy Themes: CSS Variable Reference"
framework: angular
version: "36.1.0"
---

# Legacy Themes: CSS Variable Reference

> **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/angular-data-grid/theming/) or check out the [migration guide](https://www.ag-grid.com/angular-data-grid/theming-migration/).

Here is a list of variables accepted by the grid:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `--ag-active-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | (Quartz theme only) accent colour used for checked checkboxes, range selections, and input focus outlines in the Quartz theme |
| `--ag-alpine-active-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | (Alpine theme only) accent colour used for checked checkboxes, range selections, row hover, row selections, selected tab underlines, and input focus outlines in the Alpine theme |
| `--ag-balham-active-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | (Balham theme only) accent colour used for checked checkboxes, range selections, row selections, and input focus outlines in the Balham theme |
| `--ag-material-primary-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | (Material theme only) the primary colour as defined in the [Material Design colour system](https://material.io/design/color/). Currently this is used on buttons, range selections and selected tab underlines in the Material theme |
| `--ag-material-accent-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | (Material theme only) the accent colour as defined in the [Material Design colour system](https://material.io/design/color/). Currently this is used on checked checkboxes in the Material theme |
| `--ag-foreground-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour of text and icons in primary UI elements like menus |
| `--ag-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background colour of the grid |
| `--ag-secondary-foreground-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour of text and icons in UI elements that need to be slightly less emphasised to avoid distracting attention from data |
| `--ag-data-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour of text in grid cells |
| `--ag-header-foreground-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour of text and icons in the header |
| `--ag-header-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background colour for all headers, including the grid header, panels etc |
| `--ag-tooltip-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background colour for all tooltips |
| `--ag-disabled-foreground-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour of elements that can't be interacted with because they are in a disabled state |
| `--ag-subheader-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background colour for second level headings within UI components |
| `--ag-subheader-toolbar-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background colour for toolbars directly under subheadings (as used in the chart settings menu) |
| `--ag-control-panel-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background for areas of the interface that contain UI controls, like tool panels and the chart settings menu |
| `--ag-side-button-selected-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background for the active tab on the side of the control panel |
| `--ag-selected-row-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background color of selected rows in the grid and in dropdown menus |
| `--ag-data-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background colour applied to rows |
| `--ag-odd-row-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Alternative background colour applied to every other row to create a striped effect |
| `--ag-modal-overlay-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background color of the overlay shown over the grid e.g. a data loading indicator |
| `--ag-menu-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background color of menus, including the column menu and right-click context menu |
| `--ag-panel-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background color of panels, including the advanced filter builder and integrated charts |
| `--ag-row-hover-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background color when hovering over rows in the grid and in dropdown menus. Set to `transparent` to disable the hover effect. Note: if you want a rollover on one but not the other, use CSS selectors instead of this property |
| `--ag-row-drag-indicator-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Color of the indicator line used to show where a row will be inserted when dragging to reorder rows |
| `--ag-row-drag-indicator-width` | `CSS color (e.g. `red` or `#fff`)` |  |  | Width of the indicator line used to show where a row will be inserted when dragging to reorder rows |
| `--ag-column-drag-indicator-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Color of the indicator line used to show where a row will be inserted when dragging to reorder columns |
| `--ag-column-drag-indicator-width` | `CSS color (e.g. `red` or `#fff`)` |  |  | Width of the indicator line used to show where a row will be inserted when dragging to reorder columns |
| `--ag-column-hover-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background color when hovering over columns in the grid |
| `--ag-range-selection-border-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour to draw around selected cell ranges |
| `--ag-range-selection-border-style` | `a CSS border style (e.g. `dotted`, `solid` or `none`)` |  |  | Border style for range selections, e.g. `solid` or `dashed`. Do not set to `none`, if you need to hide the border set the color to transparent |
| `--ag-range-selection-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background colour of selected cell ranges. |
| `--ag-range-selection-background-color-2` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background-color when 2 selected ranges overlap. Hint: for a realistic appearance of multiple semi-transparent colours overlaying, set the opacity to 1-((1-X)^2) where X is the opacity of --ag-range-selection-background-color |
| `--ag-range-selection-background-color-3` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background-color when 3 selected ranges overlap. Hint: for a realistic appearance of multiple semi-transparent colours overlaying, set the opacity to 1-((1-X)^3) where X is the opacity of --ag-range-selection-background-color |
| `--ag-range-selection-background-color-4` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background-color when 4 or more selected ranges overlap. Hint: for a realistic appearance of multiple semi-transparent colours overlaying, set the opacity to 1-((1-X)^4) where X is the opacity of --ag-range-selection-background-color |
| `--ag-range-selection-highlight-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background colour to briefly apply to a cell range when it is copied from or pasted into |
| `--ag-range-header-highlight-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background colour of the grid header when any cell of that header is part of a range. This is not visible unless enabled in the cell selection options. |
| `--ag-calculated-column-highlight-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background colour of the calculated column currently being edited. This is not visible unless calculated column highlighting is enabled. |
| `--ag-selected-tab-underline-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour of the border drawn under selected tabs |
| `--ag-selected-tab-underline-width` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | Thickness of the border drawn under selected tabs |
| `--ag-selected-tab-underline-transition-speed` | `CSS time duration (e.g. `3s` or `250ms`)` |  |  | Duration of animation used to show and hide the border drawn under selected tabs |
| `--ag-range-selection-chart-category-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background colour for cells that provide categories to the current range chart |
| `--ag-range-selection-chart-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background colour for cells that provide data to the current range chart |
| `--ag-header-cell-hover-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Rollover colour for header cells. If you set this variable and have enabled column reordering by dragging, you may want to set `--ag-header-cell-moving-background-color` to ensure that the rollover colour remains in place during dragging. |
| `--ag-header-cell-moving-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour applied to header cells when the column is being dragged to a new position |
| `--ag-value-change-value-highlight-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour to apply when a cell value changes and enableCellChangeFlash is enabled |
| `--ag-value-change-delta-up-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour to temporarily apply to cell data when its value increases in an agAnimateShowChangeCellRenderer cell |
| `--ag-value-change-delta-down-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour to temporarily apply to cell data when its value decreases in an agAnimateShowChangeCellRenderer cell |
| `--ag-chip-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour for the 'chip' that represents a column that has been dragged onto a drop zone |
| `--ag-borders` | `a CSS border style and size (e.g. `solid 1px` or `none`)` |  |  | Enable or disable borders around most UI elements in the grid. Set this to a border style and thickness, e.g. `solid 1px` to enable borders, or `none` to disable borders. Use the other --ag-borders-* variables for more fine grained control over which UI elements get borders. |
| `--ag-border-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour for border around major UI components like the grid itself, headers; footers and tool panels. |
| `--ag-borders-critical` | `a CSS border style and size (e.g. `solid 1px` or `none`)` |  |  | Enable or disable borders that are critical to UX, e.g. those between headers and rows. Themes that disable borders generally may want to enable these borders. Set this to a border style and thickness, e.g. `solid 1px` to enable borders, or `none` to disable borders. |
| `--ag-borders-secondary` | `a CSS border style and size (e.g. `solid 1px` or `none`)` |  |  | Draw decorative borders separating UI elements within components. Set this to a border style and thickness, e.g. `solid 1px` to enable borders, or `none` to disable borders. |
| `--ag-secondary-border-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour for borders used to separate elements within a major UI component |
| `--ag-row-border-style` | `a CSS border style (e.g. `solid` or `dotted`)` |  |  | Default border style for the grid rows. Set this to a border style, e.g. `solid`, `dotted`. |
| `--ag-row-border-width` | `a CSS border style (e.g. `solid` or `dotted`)` |  |  | The thickness of the border between grid rows. Set this to a border thickness, e.g. `1px`. |
| `--ag-row-border-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour of the border between grid rows, or `transparent` to display no border |
| `--ag-row-numbers-selected-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background color of the Row Numbers cells when the range selects all cells for that row. |
| `--ag-menu-border-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour of the border around menus including the column menu and right-click context menu |
| `--ag-panel-border-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour of the border around panels including the advanced filter builder and integrated charts |
| `--ag-cell-horizontal-border` | `a CSS border style and colour (e.g. `solid red`)` |  |  | Default border for cells. This can be used to specify the border-style and border-color properties e.g. `dashed red` but the border-width is fixed at 1px. Set to `solid transparent` to show no border. |
| `--ag-borders-input` | `a CSS border style and size (e.g. `solid 1px` or `none`)` |  |  | Draw borders around inputs. Set this to a border style and thickness, e.g. `solid 1px` to enable borders, or `none` to disable borders. |
| `--ag-input-border-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour for borders around inputs, if enabled with --ag-borders-input |
| `--ag-borders-input-invalid` | `a CSS border style and size (e.g. `solid 1px` or `none`)` |  |  | Draw borders around inputs when their content has failed validation. Set this to a border style and thickness, e.g. `solid 2px` to enable borders. Set to `none` to disable borders but ensure that you have added styles to differentiate invalid from valid inputs. |
| `--ag-input-border-color-invalid` | `CSS color (e.g. `red` or `#fff`)` |  |  | The color for the border around invalid inputs, if enabled with --ag-borders-input-invalid |
| `--ag-full-row-invalid-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | The background color for a row with invalid editor status |
| `--ag-borders-side-button` | `a CSS border style and size (e.g. `solid 1px` or `none`)` |  |  | Draw borders around the vertical tabs on the side of the control panel. Set this to a border style and thickness, e.g. `solid 1px` to enable borders, or `none` to disable borders. |
| `--ag-border-radius` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | Border radius applied to many elements such as dialogs and form widgets |
| `--ag-invalid-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | The color applied to form elements in an invalid state |
| `--ag-input-disabled-border-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | The border around disabled text inputs |
| `--ag-input-disabled-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | The background colour of disabled text inputs |
| `--ag-checkbox-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | the background of an checkbox |
| `--ag-checkbox-border-radius` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | edge rounding a checkboxes |
| `--ag-checkbox-checked-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | color of the `checkbox-checked` icon that is shown in a checked checkbox |
| `--ag-checkbox-unchecked-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | color of the `checkbox-unchecked` icon that is shown in an unchecked checkbox |
| `--ag-checkbox-indeterminate-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | color of the `checkbox-indeterminate` icon that is shown in an indeterminate checkbox |
| `--ag-toggle-button-border-width` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | size of the toggle button outer border |
| `--ag-toggle-button-on-border-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | colour of the toggle button outer border in its 'on' state |
| `--ag-toggle-button-off-border-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | colour of the toggle button's outer border in its 'off' state |
| `--ag-toggle-button-on-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | colour of the toggle button background in its 'on' state |
| `--ag-toggle-button-off-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | colour of the toggle button background in its 'off' state |
| `--ag-toggle-button-switch-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | colour of the toggle button switch (the bit that slides from left to right) |
| `--ag-toggle-button-switch-border-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | border colour of the toggle button switch (the bit that slides from left to right) |
| `--ag-toggle-button-width` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | width of the whole toggle button component |
| `--ag-toggle-button-height` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | height of the whole toggle button component |
| `--ag-input-focus-box-shadow` | `CSS box-shadow value (e.g. `0 5px 10px black`)` |  |  | box shadow around focussed inputs |
| `--ag-input-focus-border-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour of the border around focussed inputs. Set to `var(--ag-input-border-color)` if you do not want to change the border colour on focus. |
| `--ag-minichart-selected-chart-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour of border around selected chart style |
| `--ag-minichart-selected-page-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour of dot representing selected page of chart styles |
| `--ag-grid-size` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | grid-size is the main control for affecting how tightly data and UI elements are packed together. All padding and spacing in the grid is defined as a multiple of grid-size, so increasing it will make most components larger by increasing their internal white space while leaving the size of text and icons unchanged. |
| `--ag-icon-size` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | The size of square icons and icon-buttons |
| `--ag-icon-font-weight` | `CSS font weight value (e.g. `100`, `bold` or `normal`)` |  |  | The font weight to apply to icon elements, used for icon fonts that require a specific weight to work |
| `--ag-widget-container-horizontal-padding` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | The horizontal padding of containers that contain stacked widgets, such as menus and tool panels |
| `--ag-widget-container-vertical-padding` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | The vertical padding of containers that contain stacked widgets, such as menus and tool panels |
| `--ag-widget-horizontal-spacing` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | The horizontal spacing between widgets in containers that contain horizontally stacked widgets such as the column groups header component. |
| `--ag-widget-vertical-spacing` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | The vertical spacing between widgets in containers that contain vertically stacked widgets |
| `--ag-cell-horizontal-padding` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | Horizontal padding for grid and header cells (vertical padding is not set explicitly, but inferred from row-height / header-height |
| `--ag-cell-widget-spacing` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | Horizontal spacing between widgets inside cells (e.g. row group expand buttons and row selection checkboxes) |
| `--ag-row-height` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | Height of grid rows |
| `--ag-auto-height-min-body-height` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | Minimum height of the grid's rows section when using auto-height or print layout. This prevents an empty grid from collapsing to nothing. Set to `0` to remove the minimum height. |
| `--ag-header-height` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | Height of header rows |
| `--ag-list-item-height` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | Height of items in lists (example of lists are dropdown select inputs and column menu set filters) |
| `--ag-pagination-panel-height` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | Height of the pagination panel at the bottom of the grid. Defaults to the header height. |
| `--ag-header-column-separator-display` | `CSS display value - `block` to show or `none` to hide` |  |  | Whether to display the header column separator - a vertical line that displays between every header cell |
| `--ag-header-column-separator-height` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | Height of the header column separator. Percentage values are relative to the header height. |
| `--ag-header-column-separator-width` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | Width of the header column separator |
| `--ag-header-column-separator-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour of the header column separator |
| `--ag-header-column-resize-handle-display` | `CSS display value - `block` to show or `none` to hide` |  |  | Whether to show the header column resize handle - a vertical line that displays only between resizeable header columns, indicating where to drag in order to resize the column. |
| `--ag-header-column-resize-handle-height` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | Height of the header resize handle. Percentage values are relative to the header height. |
| `--ag-header-column-resize-handle-width` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | Width of the header resize handle. |
| `--ag-header-column-resize-handle-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour of the header resize handle |
| `--ag-column-select-indent-size` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | How much to indent child columns in the column tool panel relative to their parent |
| `--ag-set-filter-indent-size` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | How much to indent child filter items in the Set Filter List relative to their parent |
| `--ag-advanced-filter-builder-indent-size` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | How much to indent child filter items in the Advanced Filter Builder relative to their parent |
| `--ag-row-group-indent-size` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | How much to indent child rows in the grid relative to their parent row |
| `--ag-filter-tool-panel-group-indent` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | How much to indent child columns in the filters tool panel relative to their parent |
| `--ag-tab-min-width` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | Minimum width of the legacy tabbed column menu. Set this to the largest content you expect to be displayed in the tabbed menu to prevent the menu from changing size as you switch between tabs. |
| `--ag-menu-min-width` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | Minimum width of the filter menu |
| `--ag-side-bar-panel-width` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | Width of the sidebar that contains the columns and filters tool panels |
| `--ag-font-family` | `CSS font-family value (e.g. `font-family: `'Gill Sans', sans-serif`)` |  |  | Font family used for all text |
| `--ag-font-size` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | Default font size for text in the grid |
| `--ag-icon-font-family` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | The [icon font](https://www.ag-grid.com/angular-data-grid/custom-icons/) used by the grid. |
| `--ag-card-radius` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  | cards are elements that float above the UI |
| `--ag-card-shadow` | `CSS box-shadow value (e.g. `0 5px 10px black`)` |  |  | the default card shadow applies to simple cards like column drag indicators and text editors |
| `--ag-popup-shadow` | `CSS box-shadow value (e.g. `0 5px 10px black`)` |  |  | override the shadow for popups - cards that contain complex UI, like menus and charts |
| `--ag-advanced-filter-join-pill-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour of the join operator pills in the Advanced Filter Builder |
| `--ag-advanced-filter-column-pill-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour of the column pills in the Advanced Filter Builder |
| `--ag-advanced-filter-option-pill-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour of the filter option pills in the Advanced Filter Builder |
| `--ag-advanced-filter-value-pill-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour of the value pills in the Advanced Filter Builder |
| `--ag-row-loading-skeleton-effect-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour of the skeleton loading effect used in the SSRM |
| `--ag-find-match-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour of matches used in Find |
| `--ag-find-match-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background colour of matches used in Find |
| `--ag-find-active-match-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour of the active match used in Find |
| `--ag-find-active-match-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background colour of the active match used in Find |
| `--ag-pinned-row-border` | `a CSS border style, size and color (e.g. `1px dotted black`, `3rem solid #fff` or `none`)` |  |  | Border style for pinned row containers, e.g. `1px solid black` or `3rem dashed #ggg`. |
| `--ag-pinned-row-text-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Text colour of the rows that have been pinned to the top or bottom |
| `--ag-pinned-row-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background colour of the rows that have been pinned to the top or bottom |
| `--ag-pinned-row-font-weight` | `CSS font weight value (e.g. `100`, `bold` or `normal`)` |  |  | Font weight of the rows that have been pinned to the top or bottom |
| `--ag-pinned-source-row-text-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Text colour of the source row that has been pinned |
| `--ag-pinned-source-row-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background colour of the source row that has been pinned |
| `--ag-pinned-source-row-font-weight` | `CSS font weight value (e.g. `100`, `bold` or `normal`)` |  |  | Font weight of the source row that has been pinned |