Add @btn-border-radius variables (#16271)

docs/_includes/customizer-variables.html

@@ -400,6 +400,20 @@
     <label for="input-@btn-link-disabled-color">@btn-link-disabled-color</label>
     <input id="input-@btn-link-disabled-color" type="text" value="@gray-light" data-var="@btn-link-disabled-color" class="form-control"/>
   </div>
+  <div class="col-xs-4">
+    <label for="input-@btn-border-radius-base">@btn-border-radius-base</label>
+    <input id="input-@btn-border-radius-base" type="text" aria-describedby="help-block-@btn-border-radius-base" value="@border-radius-base" data-var="@btn-border-radius-base" class="form-control"/>
+    <p id="help-block-@btn-border-radius-base" class="help-block">Allows for customizing button radius independently from global border radius</p>
+  </div>
+  <div class="clearfix"></div>
+  <div class="col-xs-4">
+    <label for="input-@btn-border-radius-large">@btn-border-radius-large</label>
+    <input id="input-@btn-border-radius-large" type="text" value="@border-radius-large" data-var="@btn-border-radius-large" class="form-control"/>
+  </div>
+  <div class="col-xs-4">
+    <label for="input-@btn-border-radius-small">@btn-border-radius-small</label>
+    <input id="input-@btn-border-radius-small" type="text" value="@border-radius-small" data-var="@btn-border-radius-small" class="form-control"/>
+  </div>
 </div>
 <h2 id="forms">Forms</h2>
 <div class="row">

less/button-groups.less

@@ -173,11 +173,11 @@
     border-radius: 0;
   }
   &:first-child:not(:last-child) {
-    border-top-right-radius: @border-radius-base;
+    border-top-right-radius: @btn-border-radius-base;
     .border-bottom-radius(0);
   }
   &:last-child:not(:first-child) {
-    border-bottom-left-radius: @border-radius-base;
+    border-bottom-left-radius: @btn-border-radius-base;
     .border-top-radius(0);
   }
 }

less/buttons.less

@@ -17,7 +17,7 @@
   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
   border: 1px solid transparent;
   white-space: nowrap;
-  .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
+  .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @btn-border-radius-base);
   .user-select(none);
 
   &,
@@ -132,14 +132,14 @@
 
 .btn-lg {
   // line-height: ensure even-numbered height of button next to large input
-  .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
+  .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @btn-border-radius-large);
 }
 .btn-sm {
   // line-height: ensure proper height of button next to small input
-  .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
+  .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small);
 }
 .btn-xs {
-  .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small);
+  .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small);
 }
 
 

less/variables.less

@@ -170,6 +170,11 @@
 
 @btn-link-disabled-color:        @gray-light;
 
+//** Allows for customizing button radius independently from global border radius
+@btn-border-radius-base:         @border-radius-base;
+@btn-border-radius-large:        @border-radius-large;
+@btn-border-radius-small:        @border-radius-small;
+
 
 //== Forms
 //