title: CSS: How to change the color of the bottom right square of the scrollbar in webkit?
body: <p>Question:</p>
  
  <p>How can I change the color of the bottom-right square of the scrollbar (to black) in webkit (Google-Chrome) ?</p>
  
  <p><img src="https://i.stack.imgur.com/EAArh.png" alt="Scrollbar"></p>
  
  <p>This is what I have so far:</p>
  
  <pre><code>/*
  http://www.coffeepowered.net/2011/06/17/sexy-css-scrollbars/
  http://css-tricks.com/custom-scrollbars-in-webkit/
  */
  ::-webkit-scrollbar {
      width: 13px;
      height: 13px; }
  
  ::-webkit-scrollbar:hover {
      height: 18px; }
  
  ::-webkit-scrollbar-button:start:decrement,
  ::-webkit-scrollbar-button:end:increment 
  {
      height: 15px;
      width: 13px;
      display: block;
      background: #101211;
      background-repeat: no-repeat; 
  }
  
  ::-webkit-scrollbar-button:horizontal:decrement 
  {
      background-image: url(./images/horizontal-decrement-arrow.png);
      background-position: 4px 3px; 
  }
  
  ::-webkit-scrollbar-button:horizontal:increment 
  {
      background-image: url(./images/horizontal-increment-arrow.png);
      background-position: 3px 3px; 
  }
  
  ::-webkit-scrollbar-button:vertical:decrement 
  {
      background-image: url(./images/vertical-decrement-arrow.png);
      background-position: 3px 4px; 
  }
  
  ::-webkit-scrollbar-button:vertical:increment 
  {
      background-image: url(./images/vertical-increment-arrow.png);
      background-position: 3px 4px; 
  }
  
  ::-webkit-scrollbar-button:horizontal:decrement:active { background-image: url(./images/horizontal-decrement-arrow-active.png); }
  
  ::-webkit-scrollbar-button:horizontal:increment:active { background-image: url(./images/horizontal-increment-arrow-active.png); }
  
  ::-webkit-scrollbar-button:vertical:decrement:active { background-image: url(./images/vertical-decrement-arrow-active.png); }
  
  ::-webkit-scrollbar-button:vertical:increment:active { background-image: url(./images/vertical-increment-arrow-active.png); }
  
  
  ::-webkit-scrollbar-track 
  {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
      border-radius: 10px;
  }
  
  ::-webkit-scrollbar-track-piece {
      background-color: #151716; }
  
  ::-webkit-scrollbar-thumb:vertical 
  {
      height: 50px;
      background: -webkit-gradient(linear, left top, right top, color-stop(0%, #4d4d4d), color-stop(100%, #333333));
      border: 1px solid #0d0d0d;
      border-top: 1px solid #666666;
      border-left: 1px solid #666666; 
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
  }
  
  ::-webkit-scrollbar-thumb:horizontal 
  {
      width: 50px;
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4d4d4d), color-stop(100%, #333333));
      border: 1px solid #1f1f1f;
      border-top: 1px solid #666666;
      border-left: 1px solid #666666; 
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
  }
  </code></pre>