diff --git a/src/plugins/qmldesigner/components/itemlibrary/qml/ItemsView.qml b/src/plugins/qmldesigner/components/itemlibrary/qml/ItemsView.qml
index 793d7ea7f0158848a2882f612bf59096da02b8ec..697d3a95a8c2feebc0de4154ae3b6ae879a34c5f 100644
--- a/src/plugins/qmldesigner/components/itemlibrary/qml/ItemsView.qml
+++ b/src/plugins/qmldesigner/components/itemlibrary/qml/ItemsView.qml
@@ -223,6 +223,7 @@ content position out of scope regarding the scrollbar. */
         anchors.bottom: parent.bottom
         anchors.bottomMargin: 1
         anchors.right: parent.right
+        anchors.rightMargin: 2
         width: (itemsFlickable.contentHeight > itemsFlickable.height)? 11:0
 
         Scrollbar {
diff --git a/src/plugins/qmldesigner/components/itemlibrary/qml/Scrollbar.qml b/src/plugins/qmldesigner/components/itemlibrary/qml/Scrollbar.qml
index 33bc50fc80075718a9809b50374a30087fe60946..23adc86abb20e40c779bd4414dd09846332100c4 100644
--- a/src/plugins/qmldesigner/components/itemlibrary/qml/Scrollbar.qml
+++ b/src/plugins/qmldesigner/components/itemlibrary/qml/Scrollbar.qml
@@ -39,11 +39,11 @@ Item {
     property variant flickable
 
     function scroll(delta) {
-        handle.y = Math.max(0, Math.min(scrollHeight, handle.y + delta))
+        handle.y = Math.max(2, Math.min(scrollHeight, handle.y + delta))
     }
 
     function reset() {
-        handle.y = 0
+        handle.y = 2
     }
 
     // internal
@@ -62,8 +62,7 @@ Item {
         anchors.bottom: parent.bottom
         anchors.bottomMargin: 3
         anchors.horizontalCenter: parent.horizontalCenter
-        width: 6
-        radius: 3
+        width: 10
         color: style.scrollbarColor
         border.width: 1
         border.color: style.scrollbarBorderColor
@@ -77,7 +76,7 @@ Item {
                     flickable.contentY / (flickable.contentHeight - flickable.height),
         1)
             else
-                handle.y = 0
+                handle.y = 2
 
         handle.updateFlickable = true
     }
@@ -109,6 +108,7 @@ Item {
 
     Item {
         id: handle
+        y: 2
 
         anchors.left: parent.left
         anchors.right: parent.right
@@ -125,27 +125,20 @@ Item {
                     width: parent.height
                     height: parent.width
                     y: -height - 2
-                    x: -2
 
                     rotation: 90
                     transformOrigin: Item.BottomLeft
 
                     border.color: style.scrollbarBorderColor
                     border.width: 1
-                    radius: 3
-
-                    gradient: Gradient {
-                        GradientStop { position: 0.15; color: style.scrollbarGradientStartColor }
-                        GradientStop { position: 0.78; color: style.scrollbarGradientMiddleColor }
-                        GradientStop { position: 0.80; color: style.scrollbarGradientEndColor }
-                    }
+                    color: style.sectionTitleBackgroundColor
                 }
 
                 MouseArea {
                     anchors.fill: parent
                     drag.target: parent
                     drag.axis: "YAxis"
-                    drag.minimumY: 0
+                    drag.minimumY: 2
                     drag.maximumY: scrollHeight
                 }
             }
diff --git a/src/plugins/qmldesigner/components/resources/scrollbar.css b/src/plugins/qmldesigner/components/resources/scrollbar.css
index 34e8af8acbd68147bd0cff5323dcc6a108ead19c..661c987cb933130a76e823c967534162f7a1a4e8 100644
--- a/src/plugins/qmldesigner/components/resources/scrollbar.css
+++ b/src/plugins/qmldesigner/components/resources/scrollbar.css
@@ -1,26 +1,21 @@
   QScrollBar:vertical {
-      border-image: url(:/qmldesigner/images/scrollbar-borderimage-vertical.png);
-      border-left: 0;
-      border-right: 0;
-      border-top: 3;
-      border-bottom: 3;
+      background-color: #444444;
+      border: 1px solid #333333;
       margin-top: 3;
       margin-bottom: 3;
       width: 10;
   }
 
   QScrollBar::handle:vertical {
-      background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
-                                      stop: 0.20 #888888,
-                                      stop: 0.23 #656565,
-                                      stop: 0.85 #393939);
+      background-color: #656565;
       margin-top: -5;
       margin-bottom: -5;
       min-height: 18px;
       width: 8px;
       border: 1px solid #313131;
-      border-radius: 4px;
       border-width: 1;
+      margin-left: -1;
+      margin-right: -1;
   }
 
   QScrollBar::add-line:vertical {
@@ -49,28 +44,24 @@
   }
 
   QScrollBar:horizontal {
-      border-image: url(:/qmldesigner/images/scrollbar-borderimage-horizontal.png);
-        border-left: 3;
-        border-right: 3;
-        border-top: 0;
-        border-bottom: 0;
+        background-color: #444444;
+        border: 1px solid #333333;
         margin-left: 3;
         margin-right: 3;
         height: 10;
   }
 
   QScrollBar::handle:horizontal {
-      background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
-                                       stop: 0.20 #888888,
-                                       stop: 0.23 #656565,
-                                       stop: 0.85 #393939);
+     background-color: #656565;
+
      margin-left: -5;
      margin-right: -5;
      min-width: 18px;
      height: 8px;
      border: 1px solid #313131;
-     border-radius: 4px;
      border-width: 1;
+     margin-top: -1;
+     margin-bottom: -1;
   }
 
   QScrollBar::add-line:horizontal {
diff --git a/src/plugins/qmldesigner/components/stateseditor/HorizontalScrollBar.qml b/src/plugins/qmldesigner/components/stateseditor/HorizontalScrollBar.qml
index a1077e7ead8e18b813be975e85d83236f9d67c92..08479b6a70a4116c9480a00ad0eeb079c5259820 100644
--- a/src/plugins/qmldesigner/components/stateseditor/HorizontalScrollBar.qml
+++ b/src/plugins/qmldesigner/components/stateseditor/HorizontalScrollBar.qml
@@ -55,9 +55,8 @@ Item {
     Rectangle {
         id: groove
         width: parent.width - 4
-        height: 6
+        height: 10
         color: "#444444"
-        radius: 3
         border.width: 1
         border.color: "#333333"
         anchors.right: parent.right
@@ -95,13 +94,8 @@ Item {
             y:0
             border.color: "#333333"
             border.width: 1
-            radius: 3
 
-            gradient: Gradient {
-                GradientStop { position: 0.20; color: "#888888" }
-                GradientStop { position: 0.23; color: "#656565" }
-                GradientStop { position: 0.85; color: "#393939" }
-            }
+            color: "#656565"
 
             MouseArea {
                 property int dragging:0;