overflow: scroll; CSS adding border to edge of page?

Question

I have a div with the following css:

overflow: scroll;

However, it appears that there's a border being added by the browser (?) where the scrollbar should appear if it was visible (even if it is not visible). I have inspected the css within dev tools, and cannot find a reference to this styling. How do I hide this scrollbar styling?

Here's an example screenshot - the red arrow points at the right edge of the screen, I did not add that border styling. It disappears if I remove the overflow: scroll; style rule.

Note, I am seeing this behavior in both Chrome and Safari (latest versions of both).

Answer 1

Setting the overflow property to 'scroll' clips the content to size. This prevents the content from exceeding it's container borders horizontally and vertically. It also places a scrollbar horizontally and vertically, regardless of whether it is needed or not.

This will display both scroll bars:

<div id="div1">
  Content
</div>

#div1 {
    overflow:scroll;
}

The 'auto' value will display a scroll bar vertically, horizontally or both as required.

Change the CSS to:

#div1 {
    overflow:auto;
}

You can also set the overflow property for horizontal or vertical only. You can use this over auto if you want to guarantee there can't be a vertical scroll bar.

Change the CSS to:

#div1 {
    overflow-x:scroll; /* Set the overflow horizontal property to clip the content 
and display a horizontal scroll bar. */
} 
    overflow-y:hidden; /* Set the overflow vertical property to clip the content, 
hide the vertical scroll bar and any content outside of the top/bottom borders. */
}