diff --git a/docs/content/utilities/borders.mdx b/docs/content/utilities/borders.mdx
index c279a237fb..e26e874aa7 100644
--- a/docs/content/utilities/borders.mdx
+++ b/docs/content/utilities/borders.mdx
@@ -171,15 +171,18 @@ Use `border-dashed` to give an element a dashed border.
 Use the following utilities to add or remove rounded corners: `rounded-0` removes rounded corners, `rounded-1` applies a border radius of 3px, `rounded-2` applies a border radius of 6px. `.circle` applies a border radius of 50%, which turns square elements into perfect circles.
 
 ```html live
-<div class="Box rounded-0 mb-2">
+<div class="border rounded-0 p-2 mb-2">
   .rounded-0
 </div>
-<div class="border rounded-1 mb-2">
+<div class="border rounded-1 p-2 mb-2">
   .rounded-1
 </div>
-<div class="border rounded-2 mb-2">
+<div class="border rounded-2 p-2 mb-2">
   .rounded-2
 </div>
+<div class="border rounded-3 p-2 mb-2">
+  .rounded-3
+</div>
 <div class="border circle p-3" style="width: 100px; height: 100px;">
   .circle
 </div>
@@ -188,17 +191,17 @@ Use the following utilities to add or remove rounded corners: `rounded-0` remove
 You can also add rounded corners to each edge (top, right, bottom, left) with the following utilities:
 
 ```html live
-<div class="border rounded-top-1 mb-2">
-  .rounded-top-1
+<div class="border rounded-top-2 p-2 mb-2">
+  .rounded-top-2
 </div>
-<div class="border rounded-right-1 mb-2">
-  .rounded-right-1
+<div class="border rounded-right-2 p-2 mb-2">
+  .rounded-right-2
 </div>
-<div class="border rounded-bottom-1 mb-2">
-  .rounded-bottom-1
+<div class="border rounded-bottom-2 p-2 mb-2">
+  .rounded-bottom-2
 </div>
-<div class="border rounded-left-1 mb-2">
-  .rounded-left-1
+<div class="border rounded-left-2 p-2 mb-2">
+  .rounded-left-2
 </div>
 ```
 
diff --git a/src/support/variables/misc.scss b/src/support/variables/misc.scss
index 30a836314b..741c4ebc33 100644
--- a/src/support/variables/misc.scss
+++ b/src/support/variables/misc.scss
@@ -5,7 +5,7 @@ $border-width: 1px !default;
 $border-color: $border-gray !default;
 $border-style: solid !default;
 $border: $border-width $border-color $border-style !default;
-$border-radius: 3px !default;
+$border-radius: 6px !default;
 
 // Box shadow
 $box-shadow: 0 1px 1px rgba($black, 0.1) !default;
diff --git a/src/utilities/borders.scss b/src/utilities/borders.scss
index d3df5ae7f5..bf497fa6d6 100644
--- a/src/utilities/borders.scss
+++ b/src/utilities/borders.scss
@@ -42,10 +42,12 @@
     // Rounded corners
     /* Remove the border-radius */
     .rounded#{$variant}-0 { border-radius: 0 !important; }
+    /* Add a half border-radius to all corners */
+    .rounded#{$variant}-1 { border-radius: $border-radius / 2 !important; }
     /* Add a border-radius to all corners */
-    .rounded#{$variant}-1 { border-radius: $border-radius !important; }
-    /* Add a 2x border-radius to all corners */
-    .rounded#{$variant}-2 { border-radius: $border-radius * 2 !important; }
+    .rounded#{$variant}-2 { border-radius: $border-radius !important; }
+    /* Add a double border-radius to all corners */
+    .rounded#{$variant}-3 { border-radius: $border-radius * 2 !important; }
 
     @each $edge, $corners in $edges {
       .rounded#{$variant}-#{$edge}-0 {
@@ -56,11 +58,17 @@
 
       .rounded#{$variant}-#{$edge}-1 {
         @each $corner in $corners {
-          border-#{$corner}-radius: $border-radius !important;
+          border-#{$corner}-radius: $border-radius / 2 !important;
         }
       }
 
       .rounded#{$variant}-#{$edge}-2 {
+        @each $corner in $corners {
+          border-#{$corner}-radius: $border-radius !important;
+        }
+      }
+
+      .rounded#{$variant}-#{$edge}-3 {
         @each $corner in $corners {
           border-#{$corner}-radius: $border-radius * 2 !important;
         }