Styling Borders

Theme borders on rows, columns, headers, and the grid wrapper.

Common border parameters:

borderColor - sets the default color 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

For a complete list, search for “border” in the AG Grid Theme Builder.

```python
import dash_ag_grid as dag
from dash import Dash, html

app = Dash()

columnDefs = [
    {"field": "make"},
    {"field": "model"},
    {"field": "price"},
]

rowData = [
    {"make": "Toyota", "model": "Celica", "price": 35000},
    {"make": "Ford", "model": "Mondeo", "price": 32000},
    {"make": "Porsche", "model": "Boxster", "price": 72000},
    {"make": "BMW", "model": "M50", "price": 60000},
    {"make": "Aston Martin", "model": "DBX", "price": 190000},
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="styling-borders",
            columnDefs=columnDefs,
            rowData=rowData,
            columnSize="sizeToFit",
            dashGridOptions={
                "theme": {
                    "function": """themeQuartz.withParams({
                        wrapperBorder: false,
                        headerRowBorder: false,
                        rowBorder: { style: 'dotted', width: 3, color: '#9696C8' },
                        columnBorder: { style: 'dashed', color: '#9696C8' }
                    })"""
                }
            },
        ),
    ],
)

if __name__ == "__main__":
    app.run(debug=True)
```

Using Legacy Theming

When using legacy theming, use --ag-border-* and --ag-row-border-* CSS variables. See Customising Borders in the AG Grid docs for additional details.