In order to access this site you need to enable JavaScript!

You are here: Reference > CSS > properties > scrollbar-3dlight-color

scrollbar-3dlight-color property

Browser support:

Specifies the color of the outer top and left bevel edges of the scroll box and scroll arrows of the scroll bar.

To manipulate the scrollbar displaying status, use the overflow property.

JavaScript page for this property: scrollbar3dLightColor. You can find other example(s) there.

Possible values:

One of the following values:

color

Color of the outer top and left bevel edges of the scroll box. For the supported color values, see the colors page.

inherit

Takes the value of this property from the computed style of the parent element.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the scrollbar-3dlight-color property:

<head>
    <style>
        .newScrollBar {
            scrollbar-3dlight-color: #4FBDDD;
            scrollbar-arrow-color: #EEE1AE;
            scrollbar-darkshadow-color: #000000;
            scrollbar-face-color: #A0CCE0;
            scrollbar-highlight-color: #F8F2DC;
            scrollbar-shadow-color: #176F99;
            scrollbar-track-color: #E7F2FA;

            overflow: scroll;
            width: 200px;
            height: 167px;
            border: 1px solid #cccccc;
        }
    </style>
</head>
<body>
    <div class="newScrollBar">
        Look at the colors of the scroll-bars.<br />
        ....................................................<br />
        ....................................................<br />
        Look at the colors of the scroll-bars.<br />
        ....................................................<br />
        ....................................................<br />
        Look at the colors of the scroll-bars.<br />
    </div>
</body>