The custom scroll bar covers edges and goes all the way to the menu

[Il Domandatore]

I created the scroll bars customized with the colors of the website. I added a border to the oval to move the scroll bar to give it a padding effect. This border covers the edge of the scroll bar. The scroll bar is inexplicably next to the menu. Why does the size of the oval change?

    /* Scrollbar width and color on Chrome. */
::-webkit-scrollbar {
    width: 66px;
    background: #3b633b;
}

/* Adds a border to the sidebar on hover. */
::-webkit-scrollbar:hover {
  border: 3px solid #000000 !important;
}

/* Style of the button and the board, in the scroll bar on Chrome. */
::-webkit-scrollbar-thumb {
    background: #000000 !important;
    height: 88px !important;
    border-radius: 99px !important;
      border: 11px solid #3b633b;
}

https://postimg.cc/gallery/cxFk3Lz

[Ingolme]

The oval appears to be exactly the width of the scrollbar area, 66 pixels as given in your CSS. It has a border within it which is colored the same as the background, which makes it appear smaller, but it still is 66 pixels.

The scrollbar rectangle is also 66 pixels wide, even when the black border occupies 4 pixels of space within those 66 pixels.

There isn't a way to prevent this, the borders are always rendered within the bounding box in the scrollbar DOM.

[Il Domandatore]

I don't understand how to prevent;
- The edges covered by the oval.
- The scroll bar under the menu and not next to it.

Edited October 10, 2021 by Il Domandatore

[Ingolme]

You can't prevent the edges being covered by the oval. The best solution is to not give it a black border. Try highlighting it by changing the background color (and oval border color) instead.

To fix the problem of the menu overlapping the scrollbar, give the menu a right margin of 66px. The problem is that your menu has  been taken out of the document flow, so it is in front of the rest of the document which includes the scrollbar.

[Il Domandatore]

The border is an important accessibility requirement. I set the site that on hover there are 3px black borders. Changing color would cause color accessibility problems.
I use 4 colors;
- Black
- Dark green
- Light green
- White (only for text fields and not combined with light green).

I have removed any color changes on hover, because I find them terrible for accessibility. Visible? Even too much....