How to set Column Header separator width?

[Rob]

I seem unable to locate the CSS class I need to use for setting column separator width.  I have tried, but no luck.

Thought maybe .k-separator but that didn't seem to do anything.  Dev mode inspection via Edge didn't reveal anything I could use/find.

If I specify a column like so:

                    <GridColumn Title="Effective">
                        <Columns>
                            <GridColumn Field=@nameof(RateDispatchItem.EffectiveDate) Title="Current" Editable="false" TextAlign="ColumnTextAlign.Right" DisplayFormat="{0:MM/dd/yyyy}" Width="7rem" />
                            <GridColumn Field=@nameof(RateDispatchItem.NextEffectiveDate) Title="Next" Editable="true" TextAlign="ColumnTextAlign.Right" DisplayFormat="{0:MM/dd/yyyy}" Width="7rem" />
                        </Columns>
                    </GridColumn>

I'll get column separators for entire grid (which sorta makes sense):

BUT, I can't seem to make column separators work for single titles like:

I'd like to set the column header separator to a 1px and apply system wide (just the header, no the grid content).

Hints?

 

[Dimo]

Hi Rob,

If you check a Grid header cell (<th>) in the browser's DOM inspector, you will see that the border is there, but is transparent (see the attached screenshot). So you only need to override the color. You can use a theme variable if you like to reuse our color scheme.

div.k-grid .k-table-th {
    border-left-color: var(--kendo-color-border);
}

Regards,
Dimo
Progress Telerik

[Rob]

Thanks Dimo, 

Your solution works ... I was thinking border-right not left which is probably why I got nowhere with inspection.

However, based on user feedback I ended up changing the column color for all grids and not just the header area using the following:

.k-grid .k-table-th, .k-grid td, .k-grid .k-table-td {
    border-inline-start-color: rgb(8 7 7 / 0.16);
}

Rob.