Files.app: Set border-outset for image-border of buttons.

chrome/browser/resources/file_manager/css/common.css

 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 /* This file contains "borrowed" copy of standard styles. To simplify merging,
  * when altering, please preserve original property value by adding comments. */
 input.common[type='checkbox'],
 input.common[type='radio'] {
   -webkit-appearance: none;
   border: 1px solid #555;
@@ skipping 94 matching lines @@
   top: 3px;
   width: 21px;
 }
 
 .bubble .close-x:hover {
   opacity: 0.7;
 }
 
 .buttonbar {
   display: -webkit-box;
-  height: 35px;
+  height: 31px;
 }
 
 .buttonbar.right {
   -webkit-box-flex: 1.0;
   -webkit-box-pack: end;
 }
 
 .buttonbar button:active img {
   opacity: 1.0;
 }
@@ skipping 113 matching lines @@
 menu.chrome-menu > menuitem[checked] {
   background-image: -webkit-image-set(
     url('../images/common/check_no_box.png') 1x,
     url('../images/common/2x/check_no_box.png') 2x);
 }
 
 menu.chrome-menu > [checked]::before {
   display: none;
 }
 
-/* Ok/Cancel style buttons */
+/**
+ * Ok/Cancel style buttons
+ * Height: 31px (content:21px + border:5px * 2)
+ **/
 button,
 input[type='button'],
 input[type='submit'],
 select {
   background-color: rgb(250, 250, 250);
   background-image: none;
   background-position: center;
   background-repeat: no-repeat;
   border: 5px solid transparent;
   border-image: -webkit-image-set(
     url('../images/common/button.png') 1x,
-    url('../images/common/2x/button.png') 2x) 5 5 repeat;
-  box-shadow: inset 0 1px 1px 0 rgb(255, 255, 255);
+    url('../images/common/2x/button.png') 2x) 5 / 5px / 2px repeat;
   box-sizing: content-box;
   color: rgb(34, 34, 34);
   cursor: default;
-  height: 25px;
-  line-height: 25px;
+  height: 21px;
+  line-height: 21px;
   margin: 0;
-  min-height: 25px;
-  min-width: 60px;
+  min-height: 21px;
+  min-width: 55px;
   padding: 0 10px;
   position: relative;
   text-align: center;
   z-index: 1;
 }
 
 .buttonbar button {
-  -webkit-margin-start: 8px;
+  -webkit-margin-start: 10px;
 }
 
 button:hover,
 input[type='button']:hover,
 input[type='submit']:hover,
 select:hover {
   border-image: -webkit-image-set(
     url('../images/common/button_hover.png') 1x,
-    url('../images/common/2x/button_hover.png') 2x) 5 5 repeat;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    url('../images/common/2x/button_hover.png') 2x) 5 / 5px / 2px repeat;
   color: #222;
 }
 
 button:active,
 input[type='button']:active,
 input[type='submit']:active {
   border-image: -webkit-image-set(
     url('../images/common/button_pressed.png') 1x,
-    url('../images/common/2x/button_pressed.png') 2x) 5 5 repeat;
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    url('../images/common/2x/button_pressed.png') 2x) 5 / 5px / 2px repeat;
   color: #333;
 }
 
 button[disabled],
 input[type='button'][disabled],
 input[type='submit'][disabled],
 button[disabled]:hover,
 input[type='button'][disabled]:hover,
 input[type='submit'][disabled]:hover {
   background-color: rgb(250, 250, 250);
   background-image: none;
-  border: 1px solid rgb(255, 255, 255);
-  border-bottom: 1px solid rgb(180, 180, 180);
-  border-left: 1px solid rgb(220, 220, 220);
-  border-right: 1px solid rgb(200, 200, 200);
-  border-top: 1px solid rgb(220, 220, 220);
-  box-shadow: inset 0 1px 1px 0 rgb(255, 255, 255);
+  border-image: -webkit-image-set(
+    url('../images/common/button.png') 1x,
+    url('../images/common/2x/button.png') 2x) 5 / 5px / 2px repeat;
   color: rgb(150, 150, 150);
 }
 
 /* Gray progress bar. */
 .progress-bar {
   background-color: #e6e6e6;
   border-radius: 3px;
   height: 6px;
 }
 
@@ skipping 166 matching lines @@
   width: 44px;
 }
 
 .cr-dialog-close:hover {
   background-image: url('chrome://theme/IDR_CLOSE_DIALOG_H');
 }
 
 .cr-dialog-close:active {
   background-image: url('chrome://theme/IDR_CLOSE_DIALOG_P');
 }