diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 0714f376a6ca..0d3be57c4a4a 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -2112,44 +2112,204 @@ button,
   border-style: none;
 }
 
-.rounded {
-  border-radius: .25rem;
+.rounded-none {
+  border-radius: 0;
+}
+
+.rounded-t-none {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.rounded-r-none {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.rounded-b-none {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.rounded-l-none {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.rounded-tl-none {
+  border-top-left-radius: 0;
+}
+
+.rounded-tr-none {
+  border-top-right-radius: 0;
+}
+
+.rounded-br-none {
+  border-bottom-right-radius: 0;
+}
+
+.rounded-bl-none {
+  border-bottom-left-radius: 0;
 }
 
 .rounded-sm {
   border-radius: .125rem;
 }
 
-.rounded-lg {
-  border-radius: .5rem;
+.rounded-t-sm {
+  border-top-left-radius: .125rem;
+  border-top-right-radius: .125rem;
 }
 
-.rounded-full {
-  border-radius: 9999px;
+.rounded-r-sm {
+  border-top-right-radius: .125rem;
+  border-bottom-right-radius: .125rem;
 }
 
-.rounded-none {
-  border-radius: 0;
+.rounded-b-sm {
+  border-bottom-right-radius: .125rem;
+  border-bottom-left-radius: .125rem;
+}
+
+.rounded-l-sm {
+  border-top-left-radius: .125rem;
+  border-bottom-left-radius: .125rem;
+}
+
+.rounded-tl-sm {
+  border-top-left-radius: .125rem;
+}
+
+.rounded-tr-sm {
+  border-top-right-radius: .125rem;
+}
+
+.rounded-br-sm {
+  border-bottom-right-radius: .125rem;
+}
+
+.rounded-bl-sm {
+  border-bottom-left-radius: .125rem;
+}
+
+.rounded {
+  border-radius: .25rem;
 }
 
 .rounded-t {
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
+  border-top-left-radius: .25rem;
+  border-top-right-radius: .25rem;
 }
 
 .rounded-r {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
+  border-top-right-radius: .25rem;
+  border-bottom-right-radius: .25rem;
 }
 
 .rounded-b {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-bottom-right-radius: .25rem;
+  border-bottom-left-radius: .25rem;
 }
 
 .rounded-l {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+  border-top-left-radius: .25rem;
+  border-bottom-left-radius: .25rem;
+}
+
+.rounded-tl {
+  border-top-left-radius: .25rem;
+}
+
+.rounded-tr {
+  border-top-right-radius: .25rem;
+}
+
+.rounded-br {
+  border-bottom-right-radius: .25rem;
+}
+
+.rounded-bl {
+  border-bottom-left-radius: .25rem;
+}
+
+.rounded-lg {
+  border-radius: .5rem;
+}
+
+.rounded-t-lg {
+  border-top-left-radius: .5rem;
+  border-top-right-radius: .5rem;
+}
+
+.rounded-r-lg {
+  border-top-right-radius: .5rem;
+  border-bottom-right-radius: .5rem;
+}
+
+.rounded-b-lg {
+  border-bottom-right-radius: .5rem;
+  border-bottom-left-radius: .5rem;
+}
+
+.rounded-l-lg {
+  border-top-left-radius: .5rem;
+  border-bottom-left-radius: .5rem;
+}
+
+.rounded-tl-lg {
+  border-top-left-radius: .5rem;
+}
+
+.rounded-tr-lg {
+  border-top-right-radius: .5rem;
+}
+
+.rounded-br-lg {
+  border-bottom-right-radius: .5rem;
+}
+
+.rounded-bl-lg {
+  border-bottom-left-radius: .5rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.rounded-t-full {
+  border-top-left-radius: 9999px;
+  border-top-right-radius: 9999px;
+}
+
+.rounded-r-full {
+  border-top-right-radius: 9999px;
+  border-bottom-right-radius: 9999px;
+}
+
+.rounded-b-full {
+  border-bottom-right-radius: 9999px;
+  border-bottom-left-radius: 9999px;
+}
+
+.rounded-l-full {
+  border-top-left-radius: 9999px;
+  border-bottom-left-radius: 9999px;
+}
+
+.rounded-tl-full {
+  border-top-left-radius: 9999px;
+}
+
+.rounded-tr-full {
+  border-top-right-radius: 9999px;
+}
+
+.rounded-br-full {
+  border-bottom-right-radius: 9999px;
+}
+
+.rounded-bl-full {
+  border-bottom-left-radius: 9999px;
 }
 
 .block {
@@ -5072,44 +5232,204 @@ button,
     border-style: none;
   }
 
-  .sm\:rounded {
-    border-radius: .25rem;
+  .sm\:rounded-none {
+    border-radius: 0;
+  }
+
+  .sm\:rounded-t-none {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .sm\:rounded-r-none {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .sm\:rounded-b-none {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .sm\:rounded-l-none {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .sm\:rounded-tl-none {
+    border-top-left-radius: 0;
+  }
+
+  .sm\:rounded-tr-none {
+    border-top-right-radius: 0;
+  }
+
+  .sm\:rounded-br-none {
+    border-bottom-right-radius: 0;
+  }
+
+  .sm\:rounded-bl-none {
+    border-bottom-left-radius: 0;
   }
 
   .sm\:rounded-sm {
     border-radius: .125rem;
   }
 
-  .sm\:rounded-lg {
-    border-radius: .5rem;
+  .sm\:rounded-t-sm {
+    border-top-left-radius: .125rem;
+    border-top-right-radius: .125rem;
   }
 
-  .sm\:rounded-full {
-    border-radius: 9999px;
+  .sm\:rounded-r-sm {
+    border-top-right-radius: .125rem;
+    border-bottom-right-radius: .125rem;
   }
 
-  .sm\:rounded-none {
-    border-radius: 0;
+  .sm\:rounded-b-sm {
+    border-bottom-right-radius: .125rem;
+    border-bottom-left-radius: .125rem;
+  }
+
+  .sm\:rounded-l-sm {
+    border-top-left-radius: .125rem;
+    border-bottom-left-radius: .125rem;
+  }
+
+  .sm\:rounded-tl-sm {
+    border-top-left-radius: .125rem;
+  }
+
+  .sm\:rounded-tr-sm {
+    border-top-right-radius: .125rem;
+  }
+
+  .sm\:rounded-br-sm {
+    border-bottom-right-radius: .125rem;
+  }
+
+  .sm\:rounded-bl-sm {
+    border-bottom-left-radius: .125rem;
+  }
+
+  .sm\:rounded {
+    border-radius: .25rem;
   }
 
   .sm\:rounded-t {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
+    border-top-left-radius: .25rem;
+    border-top-right-radius: .25rem;
   }
 
   .sm\:rounded-r {
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
+    border-top-right-radius: .25rem;
+    border-bottom-right-radius: .25rem;
   }
 
   .sm\:rounded-b {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+    border-bottom-right-radius: .25rem;
+    border-bottom-left-radius: .25rem;
   }
 
   .sm\:rounded-l {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+    border-top-left-radius: .25rem;
+    border-bottom-left-radius: .25rem;
+  }
+
+  .sm\:rounded-tl {
+    border-top-left-radius: .25rem;
+  }
+
+  .sm\:rounded-tr {
+    border-top-right-radius: .25rem;
+  }
+
+  .sm\:rounded-br {
+    border-bottom-right-radius: .25rem;
+  }
+
+  .sm\:rounded-bl {
+    border-bottom-left-radius: .25rem;
+  }
+
+  .sm\:rounded-lg {
+    border-radius: .5rem;
+  }
+
+  .sm\:rounded-t-lg {
+    border-top-left-radius: .5rem;
+    border-top-right-radius: .5rem;
+  }
+
+  .sm\:rounded-r-lg {
+    border-top-right-radius: .5rem;
+    border-bottom-right-radius: .5rem;
+  }
+
+  .sm\:rounded-b-lg {
+    border-bottom-right-radius: .5rem;
+    border-bottom-left-radius: .5rem;
+  }
+
+  .sm\:rounded-l-lg {
+    border-top-left-radius: .5rem;
+    border-bottom-left-radius: .5rem;
+  }
+
+  .sm\:rounded-tl-lg {
+    border-top-left-radius: .5rem;
+  }
+
+  .sm\:rounded-tr-lg {
+    border-top-right-radius: .5rem;
+  }
+
+  .sm\:rounded-br-lg {
+    border-bottom-right-radius: .5rem;
+  }
+
+  .sm\:rounded-bl-lg {
+    border-bottom-left-radius: .5rem;
+  }
+
+  .sm\:rounded-full {
+    border-radius: 9999px;
+  }
+
+  .sm\:rounded-t-full {
+    border-top-left-radius: 9999px;
+    border-top-right-radius: 9999px;
+  }
+
+  .sm\:rounded-r-full {
+    border-top-right-radius: 9999px;
+    border-bottom-right-radius: 9999px;
+  }
+
+  .sm\:rounded-b-full {
+    border-bottom-right-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
+  .sm\:rounded-l-full {
+    border-top-left-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
+  .sm\:rounded-tl-full {
+    border-top-left-radius: 9999px;
+  }
+
+  .sm\:rounded-tr-full {
+    border-top-right-radius: 9999px;
+  }
+
+  .sm\:rounded-br-full {
+    border-bottom-right-radius: 9999px;
+  }
+
+  .sm\:rounded-bl-full {
+    border-bottom-left-radius: 9999px;
   }
 
   .sm\:block {
@@ -8012,65 +8332,225 @@ button,
     border-color: #ffbbca;
   }
 
-  .md\:border-pink-lightest,
-  .md\:hover\:border-pink-lightest:hover {
-    border-color: #ffebef;
+  .md\:border-pink-lightest,
+  .md\:hover\:border-pink-lightest:hover {
+    border-color: #ffebef;
+  }
+
+  .md\:border-solid {
+    border-style: solid;
+  }
+
+  .md\:border-dashed {
+    border-style: dashed;
+  }
+
+  .md\:border-dotted {
+    border-style: dotted;
+  }
+
+  .md\:border-none {
+    border-style: none;
+  }
+
+  .md\:rounded-none {
+    border-radius: 0;
+  }
+
+  .md\:rounded-t-none {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .md\:rounded-r-none {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .md\:rounded-b-none {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .md\:rounded-l-none {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .md\:rounded-tl-none {
+    border-top-left-radius: 0;
+  }
+
+  .md\:rounded-tr-none {
+    border-top-right-radius: 0;
+  }
+
+  .md\:rounded-br-none {
+    border-bottom-right-radius: 0;
+  }
+
+  .md\:rounded-bl-none {
+    border-bottom-left-radius: 0;
+  }
+
+  .md\:rounded-sm {
+    border-radius: .125rem;
+  }
+
+  .md\:rounded-t-sm {
+    border-top-left-radius: .125rem;
+    border-top-right-radius: .125rem;
+  }
+
+  .md\:rounded-r-sm {
+    border-top-right-radius: .125rem;
+    border-bottom-right-radius: .125rem;
+  }
+
+  .md\:rounded-b-sm {
+    border-bottom-right-radius: .125rem;
+    border-bottom-left-radius: .125rem;
+  }
+
+  .md\:rounded-l-sm {
+    border-top-left-radius: .125rem;
+    border-bottom-left-radius: .125rem;
+  }
+
+  .md\:rounded-tl-sm {
+    border-top-left-radius: .125rem;
+  }
+
+  .md\:rounded-tr-sm {
+    border-top-right-radius: .125rem;
+  }
+
+  .md\:rounded-br-sm {
+    border-bottom-right-radius: .125rem;
+  }
+
+  .md\:rounded-bl-sm {
+    border-bottom-left-radius: .125rem;
+  }
+
+  .md\:rounded {
+    border-radius: .25rem;
+  }
+
+  .md\:rounded-t {
+    border-top-left-radius: .25rem;
+    border-top-right-radius: .25rem;
+  }
+
+  .md\:rounded-r {
+    border-top-right-radius: .25rem;
+    border-bottom-right-radius: .25rem;
+  }
+
+  .md\:rounded-b {
+    border-bottom-right-radius: .25rem;
+    border-bottom-left-radius: .25rem;
+  }
+
+  .md\:rounded-l {
+    border-top-left-radius: .25rem;
+    border-bottom-left-radius: .25rem;
+  }
+
+  .md\:rounded-tl {
+    border-top-left-radius: .25rem;
+  }
+
+  .md\:rounded-tr {
+    border-top-right-radius: .25rem;
+  }
+
+  .md\:rounded-br {
+    border-bottom-right-radius: .25rem;
+  }
+
+  .md\:rounded-bl {
+    border-bottom-left-radius: .25rem;
+  }
+
+  .md\:rounded-lg {
+    border-radius: .5rem;
+  }
+
+  .md\:rounded-t-lg {
+    border-top-left-radius: .5rem;
+    border-top-right-radius: .5rem;
   }
 
-  .md\:border-solid {
-    border-style: solid;
+  .md\:rounded-r-lg {
+    border-top-right-radius: .5rem;
+    border-bottom-right-radius: .5rem;
   }
 
-  .md\:border-dashed {
-    border-style: dashed;
+  .md\:rounded-b-lg {
+    border-bottom-right-radius: .5rem;
+    border-bottom-left-radius: .5rem;
   }
 
-  .md\:border-dotted {
-    border-style: dotted;
+  .md\:rounded-l-lg {
+    border-top-left-radius: .5rem;
+    border-bottom-left-radius: .5rem;
   }
 
-  .md\:border-none {
-    border-style: none;
+  .md\:rounded-tl-lg {
+    border-top-left-radius: .5rem;
   }
 
-  .md\:rounded {
-    border-radius: .25rem;
+  .md\:rounded-tr-lg {
+    border-top-right-radius: .5rem;
   }
 
-  .md\:rounded-sm {
-    border-radius: .125rem;
+  .md\:rounded-br-lg {
+    border-bottom-right-radius: .5rem;
   }
 
-  .md\:rounded-lg {
-    border-radius: .5rem;
+  .md\:rounded-bl-lg {
+    border-bottom-left-radius: .5rem;
   }
 
   .md\:rounded-full {
     border-radius: 9999px;
   }
 
-  .md\:rounded-none {
-    border-radius: 0;
+  .md\:rounded-t-full {
+    border-top-left-radius: 9999px;
+    border-top-right-radius: 9999px;
   }
 
-  .md\:rounded-t {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
+  .md\:rounded-r-full {
+    border-top-right-radius: 9999px;
+    border-bottom-right-radius: 9999px;
   }
 
-  .md\:rounded-r {
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
+  .md\:rounded-b-full {
+    border-bottom-right-radius: 9999px;
+    border-bottom-left-radius: 9999px;
   }
 
-  .md\:rounded-b {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+  .md\:rounded-l-full {
+    border-top-left-radius: 9999px;
+    border-bottom-left-radius: 9999px;
   }
 
-  .md\:rounded-l {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+  .md\:rounded-tl-full {
+    border-top-left-radius: 9999px;
+  }
+
+  .md\:rounded-tr-full {
+    border-top-right-radius: 9999px;
+  }
+
+  .md\:rounded-br-full {
+    border-bottom-right-radius: 9999px;
+  }
+
+  .md\:rounded-bl-full {
+    border-bottom-left-radius: 9999px;
   }
 
   .md\:block {
@@ -10994,44 +11474,204 @@ button,
     border-style: none;
   }
 
-  .lg\:rounded {
-    border-radius: .25rem;
+  .lg\:rounded-none {
+    border-radius: 0;
+  }
+
+  .lg\:rounded-t-none {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .lg\:rounded-r-none {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .lg\:rounded-b-none {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .lg\:rounded-l-none {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .lg\:rounded-tl-none {
+    border-top-left-radius: 0;
+  }
+
+  .lg\:rounded-tr-none {
+    border-top-right-radius: 0;
+  }
+
+  .lg\:rounded-br-none {
+    border-bottom-right-radius: 0;
+  }
+
+  .lg\:rounded-bl-none {
+    border-bottom-left-radius: 0;
   }
 
   .lg\:rounded-sm {
     border-radius: .125rem;
   }
 
-  .lg\:rounded-lg {
-    border-radius: .5rem;
+  .lg\:rounded-t-sm {
+    border-top-left-radius: .125rem;
+    border-top-right-radius: .125rem;
   }
 
-  .lg\:rounded-full {
-    border-radius: 9999px;
+  .lg\:rounded-r-sm {
+    border-top-right-radius: .125rem;
+    border-bottom-right-radius: .125rem;
   }
 
-  .lg\:rounded-none {
-    border-radius: 0;
+  .lg\:rounded-b-sm {
+    border-bottom-right-radius: .125rem;
+    border-bottom-left-radius: .125rem;
+  }
+
+  .lg\:rounded-l-sm {
+    border-top-left-radius: .125rem;
+    border-bottom-left-radius: .125rem;
+  }
+
+  .lg\:rounded-tl-sm {
+    border-top-left-radius: .125rem;
+  }
+
+  .lg\:rounded-tr-sm {
+    border-top-right-radius: .125rem;
+  }
+
+  .lg\:rounded-br-sm {
+    border-bottom-right-radius: .125rem;
+  }
+
+  .lg\:rounded-bl-sm {
+    border-bottom-left-radius: .125rem;
+  }
+
+  .lg\:rounded {
+    border-radius: .25rem;
   }
 
   .lg\:rounded-t {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
+    border-top-left-radius: .25rem;
+    border-top-right-radius: .25rem;
   }
 
   .lg\:rounded-r {
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
+    border-top-right-radius: .25rem;
+    border-bottom-right-radius: .25rem;
   }
 
   .lg\:rounded-b {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+    border-bottom-right-radius: .25rem;
+    border-bottom-left-radius: .25rem;
   }
 
   .lg\:rounded-l {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+    border-top-left-radius: .25rem;
+    border-bottom-left-radius: .25rem;
+  }
+
+  .lg\:rounded-tl {
+    border-top-left-radius: .25rem;
+  }
+
+  .lg\:rounded-tr {
+    border-top-right-radius: .25rem;
+  }
+
+  .lg\:rounded-br {
+    border-bottom-right-radius: .25rem;
+  }
+
+  .lg\:rounded-bl {
+    border-bottom-left-radius: .25rem;
+  }
+
+  .lg\:rounded-lg {
+    border-radius: .5rem;
+  }
+
+  .lg\:rounded-t-lg {
+    border-top-left-radius: .5rem;
+    border-top-right-radius: .5rem;
+  }
+
+  .lg\:rounded-r-lg {
+    border-top-right-radius: .5rem;
+    border-bottom-right-radius: .5rem;
+  }
+
+  .lg\:rounded-b-lg {
+    border-bottom-right-radius: .5rem;
+    border-bottom-left-radius: .5rem;
+  }
+
+  .lg\:rounded-l-lg {
+    border-top-left-radius: .5rem;
+    border-bottom-left-radius: .5rem;
+  }
+
+  .lg\:rounded-tl-lg {
+    border-top-left-radius: .5rem;
+  }
+
+  .lg\:rounded-tr-lg {
+    border-top-right-radius: .5rem;
+  }
+
+  .lg\:rounded-br-lg {
+    border-bottom-right-radius: .5rem;
+  }
+
+  .lg\:rounded-bl-lg {
+    border-bottom-left-radius: .5rem;
+  }
+
+  .lg\:rounded-full {
+    border-radius: 9999px;
+  }
+
+  .lg\:rounded-t-full {
+    border-top-left-radius: 9999px;
+    border-top-right-radius: 9999px;
+  }
+
+  .lg\:rounded-r-full {
+    border-top-right-radius: 9999px;
+    border-bottom-right-radius: 9999px;
+  }
+
+  .lg\:rounded-b-full {
+    border-bottom-right-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
+  .lg\:rounded-l-full {
+    border-top-left-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
+  .lg\:rounded-tl-full {
+    border-top-left-radius: 9999px;
+  }
+
+  .lg\:rounded-tr-full {
+    border-top-right-radius: 9999px;
+  }
+
+  .lg\:rounded-br-full {
+    border-bottom-right-radius: 9999px;
+  }
+
+  .lg\:rounded-bl-full {
+    border-bottom-left-radius: 9999px;
   }
 
   .lg\:block {
@@ -13955,44 +14595,204 @@ button,
     border-style: none;
   }
 
-  .xl\:rounded {
-    border-radius: .25rem;
+  .xl\:rounded-none {
+    border-radius: 0;
+  }
+
+  .xl\:rounded-t-none {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .xl\:rounded-r-none {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .xl\:rounded-b-none {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .xl\:rounded-l-none {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .xl\:rounded-tl-none {
+    border-top-left-radius: 0;
+  }
+
+  .xl\:rounded-tr-none {
+    border-top-right-radius: 0;
+  }
+
+  .xl\:rounded-br-none {
+    border-bottom-right-radius: 0;
+  }
+
+  .xl\:rounded-bl-none {
+    border-bottom-left-radius: 0;
   }
 
   .xl\:rounded-sm {
     border-radius: .125rem;
   }
 
-  .xl\:rounded-lg {
-    border-radius: .5rem;
+  .xl\:rounded-t-sm {
+    border-top-left-radius: .125rem;
+    border-top-right-radius: .125rem;
   }
 
-  .xl\:rounded-full {
-    border-radius: 9999px;
+  .xl\:rounded-r-sm {
+    border-top-right-radius: .125rem;
+    border-bottom-right-radius: .125rem;
   }
 
-  .xl\:rounded-none {
-    border-radius: 0;
+  .xl\:rounded-b-sm {
+    border-bottom-right-radius: .125rem;
+    border-bottom-left-radius: .125rem;
+  }
+
+  .xl\:rounded-l-sm {
+    border-top-left-radius: .125rem;
+    border-bottom-left-radius: .125rem;
+  }
+
+  .xl\:rounded-tl-sm {
+    border-top-left-radius: .125rem;
+  }
+
+  .xl\:rounded-tr-sm {
+    border-top-right-radius: .125rem;
+  }
+
+  .xl\:rounded-br-sm {
+    border-bottom-right-radius: .125rem;
+  }
+
+  .xl\:rounded-bl-sm {
+    border-bottom-left-radius: .125rem;
+  }
+
+  .xl\:rounded {
+    border-radius: .25rem;
   }
 
   .xl\:rounded-t {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
+    border-top-left-radius: .25rem;
+    border-top-right-radius: .25rem;
   }
 
   .xl\:rounded-r {
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
+    border-top-right-radius: .25rem;
+    border-bottom-right-radius: .25rem;
   }
 
   .xl\:rounded-b {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+    border-bottom-right-radius: .25rem;
+    border-bottom-left-radius: .25rem;
   }
 
   .xl\:rounded-l {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+    border-top-left-radius: .25rem;
+    border-bottom-left-radius: .25rem;
+  }
+
+  .xl\:rounded-tl {
+    border-top-left-radius: .25rem;
+  }
+
+  .xl\:rounded-tr {
+    border-top-right-radius: .25rem;
+  }
+
+  .xl\:rounded-br {
+    border-bottom-right-radius: .25rem;
+  }
+
+  .xl\:rounded-bl {
+    border-bottom-left-radius: .25rem;
+  }
+
+  .xl\:rounded-lg {
+    border-radius: .5rem;
+  }
+
+  .xl\:rounded-t-lg {
+    border-top-left-radius: .5rem;
+    border-top-right-radius: .5rem;
+  }
+
+  .xl\:rounded-r-lg {
+    border-top-right-radius: .5rem;
+    border-bottom-right-radius: .5rem;
+  }
+
+  .xl\:rounded-b-lg {
+    border-bottom-right-radius: .5rem;
+    border-bottom-left-radius: .5rem;
+  }
+
+  .xl\:rounded-l-lg {
+    border-top-left-radius: .5rem;
+    border-bottom-left-radius: .5rem;
+  }
+
+  .xl\:rounded-tl-lg {
+    border-top-left-radius: .5rem;
+  }
+
+  .xl\:rounded-tr-lg {
+    border-top-right-radius: .5rem;
+  }
+
+  .xl\:rounded-br-lg {
+    border-bottom-right-radius: .5rem;
+  }
+
+  .xl\:rounded-bl-lg {
+    border-bottom-left-radius: .5rem;
+  }
+
+  .xl\:rounded-full {
+    border-radius: 9999px;
+  }
+
+  .xl\:rounded-t-full {
+    border-top-left-radius: 9999px;
+    border-top-right-radius: 9999px;
+  }
+
+  .xl\:rounded-r-full {
+    border-top-right-radius: 9999px;
+    border-bottom-right-radius: 9999px;
+  }
+
+  .xl\:rounded-b-full {
+    border-bottom-right-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
+  .xl\:rounded-l-full {
+    border-top-left-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
+  .xl\:rounded-tl-full {
+    border-top-left-radius: 9999px;
+  }
+
+  .xl\:rounded-tr-full {
+    border-top-right-radius: 9999px;
+  }
+
+  .xl\:rounded-br-full {
+    border-bottom-right-radius: 9999px;
+  }
+
+  .xl\:rounded-bl-full {
+    border-bottom-left-radius: 9999px;
   }
 
   .xl\:block {
diff --git a/defaultConfig.js b/defaultConfig.js
index 19154bcd7345..dbb001fe7c20 100644
--- a/defaultConfig.js
+++ b/defaultConfig.js
@@ -410,16 +410,19 @@ module.exports = {
   | is provided, it will be made available as the non-suffixed `.rounded`
   | utility.
   |
-  | Class name: .rounded{-radius?}
+  | If your scale includes a `0` value to reset already rounded corners, it's
+  | a good idea to put it first so other values are able to override it.
+  |
+  | Class name: .rounded{-side?}{-size?}
   |
   */
 
   borderRadius: {
-    default: '.25rem',
+    'none': '0',
     'sm': '.125rem',
+    default: '.25rem',
     'lg': '.5rem',
     'full': '9999px',
-    'none': '0',
   },
 
 
diff --git a/docs/source/docs/border-radius.blade.md b/docs/source/docs/border-radius.blade.md
index 320a21f9a313..b18af47d6eec 100644
--- a/docs/source/docs/border-radius.blade.md
+++ b/docs/source/docs/border-radius.blade.md
@@ -11,11 +11,6 @@ features:
 
 <div class="border-t border-grey-lighter">
   <table class="w-full text-left table-collapse">
-    <colgroup>
-      <col class="w-1/6">
-      <col class="w-1/3">
-      <col class="w-1/2">
-    </colgroup>
     <thead>
       <tr>
         <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
@@ -25,61 +20,229 @@ features:
     </thead>
     <tbody class="align-baseline">
       <tr>
-        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.rounded</td>
-        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">border-radius: .25rem;</td>
-        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Apply a medium border radius to all corners of an element.</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-sm</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-radius: .125rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to all corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-sm</td>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-radius: .125rem;</td>
-        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to all corners of an element.</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-t-sm</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: .125rem;<br>border-top-right-radius: .125rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to the top corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-r-sm</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: .125rem;<br>border-bottom-right-radius: .125rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to the right corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-b-sm</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: .125rem;<br>border-bottom-left-radius: .125rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to the bottom corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-l-sm</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: .125rem;<br>border-bottom-left-radius: .125rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to the left corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-tl-sm</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: .125rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to the top left corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-tr-sm</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: .125rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to the top right corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-br-sm</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: .125rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to the bottom right corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-bl-sm</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-left-radius: .125rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to the bottom left corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-radius: .25rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium border radius to all corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-t</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: .25rem;<br>border-top-right-radius: .25rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium border radius to the top corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-r</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: .25rem;<br>border-bottom-right-radius: .25rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium border radius to the right corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-lg</td>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-radius: .5rem;</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-b</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: .25rem;<br>border-bottom-left-radius: .25rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium border radius to the bottom corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-l</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: .25rem;<br>border-bottom-left-radius: .25rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium border radius to the left corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-tl</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: .25rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium border radius to the top left corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-tr</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: .25rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium border radius to the top right corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-br</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: .25rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium border radius to the bottom right corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-bl</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-left-radius: .25rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium border radius to the bottom left corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-radius: .5rem;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to all corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-full</td>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-radius: 9999px;</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-t-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: .5rem;<br>border-top-right-radius: .5rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to the top corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-r-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: .5rem;<br>border-bottom-right-radius: .5rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to the right corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-b-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: .5rem;<br>border-bottom-left-radius: .5rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to the bottom corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-l-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: .5rem;<br>border-bottom-left-radius: .5rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to the left corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-tl-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: .5rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to the top left corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-tr-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: .5rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to the top right corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-br-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: .5rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to the bottom right corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-bl-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-left-radius: .5rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to the bottom left corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-radius: 9999px;</td>
         <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round all corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-none</td>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-radius: 0;</td>
-        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from all sides of an element.</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-t-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: 9999px;<br>border-top-right-radius: 9999px;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round the top corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-r-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: 9999px;<br>border-bottom-right-radius: 9999px;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round the right corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-b-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: 9999px;<br>border-bottom-left-radius: 9999px;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round the bottom corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-t</td>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
-          border-bottom-left-radius: 0;<br>
-          border-bottom-right-radius: 0;
-        </td>
-        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Only round the top corners of an element.</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-l-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: 9999px;<br>border-bottom-left-radius: 9999px;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round the left corners of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-r</td>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
-          border-top-left-radius: 0;<br>
-          border-bottom-left-radius: 0;
-        </td>
-        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Only round the right side corners of an element.</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-tl-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: 9999px;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round the top left corner of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-b</td>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
-          border-top-right-radius: 0;<br>
-          border-top-left-radius: 0;
-        </td>
-        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Only round the bottom corners of an element.</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-tr-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: 9999px;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round the top right corner of an element.</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-l</td>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
-          border-top-right-radius: 0;<br>
-          border-bottom-right-radius: 0;
-        </td>
-        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Only round the left side corners of an element.</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-br-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: 9999px;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round the bottom right corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-bl-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-left-radius: 9999px;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round the bottom left corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-radius: 0;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from all corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-t-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: 0;<br>border-top-right-radius: 0;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from the top corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-r-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: 0;<br>border-bottom-right-radius: 0;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from the right corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-b-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: 0;<br>border-bottom-left-radius: 0;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from the bottom corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-l-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: 0;<br>border-bottom-left-radius: 0;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from the left corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-tl-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-left-radius: 0;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from the top left corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-tr-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-top-right-radius: 0;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from the top right corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-br-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-right-radius: 0;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from the bottom right corner of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.rounded-bl-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">border-bottom-left-radius: 0;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from the bottom left corner of an element.</td>
       </tr>
     </tbody>
   </table>
@@ -87,7 +250,7 @@ features:
 
 ## Rounded corners
 
-Use the `.rounded`, `.rounded-sm`, or `.rounded-lg` utilities to apply different border radius sizes to an element.
+Use the `.rounded-sm`, `.rounded`, or `.rounded-lg` utilities to apply different border radius sizes to an element.
 
 @component('_partials.code-sample', ['class' => 'flex justify-around text-sm'])
 <div class="bg-grey-light mr-3 p-4 rounded-sm">.rounded-sm</div>
@@ -128,18 +291,35 @@ This is most commonly used to remove a border radius that was applied at a small
 
 ## Rounding sides separately
 
-Combine one of the `.rounded{-size}` utilities with `.rounded-t`, `.rounded-r`, `.rounded-b`, or `.rounded-l` to only round one side of an element.
+Use `.rounded-{t|r|b|l}{-size?}` to only round one side an element.
 
 @component('_partials.code-sample', ['class' => 'flex justify-around text-sm'])
-<div class="bg-grey-light mr-3 p-4 rounded-lg rounded-t">.rounded-t</div>
-<div class="bg-grey-light mr-3 p-4 rounded-lg rounded-r">.rounded-r</div>
-<div class="bg-grey-light mr-3 p-4 rounded-lg rounded-b">.rounded-b</div>
-<div class="bg-grey-light p-4 rounded-lg rounded-l">.rounded-l</div>
+<div class="bg-grey-light mr-3 p-4 rounded-t-lg">.rounded-t-lg</div>
+<div class="bg-grey-light mr-3 p-4 rounded-r-lg">.rounded-r-lg</div>
+<div class="bg-grey-light mr-3 p-4 rounded-b-lg">.rounded-b-lg</div>
+<div class="bg-grey-light p-4 rounded-l-lg">.rounded-l-lg</div>
 @slot('code')
-<div class="rounded-lg rounded-t"></div>
-<div class="rounded-lg rounded-r"></div>
-<div class="rounded-lg rounded-b"></div>
-<div class="rounded-lg rounded-l"></div>
+<div class="rounded-t-lg"></div>
+<div class="rounded-r-lg"></div>
+<div class="rounded-b-lg"></div>
+<div class="rounded-l-lg"></div>
+@endslot
+@endcomponent
+
+## Rounding corners separately
+
+Use `.rounded-{tl|tr|br|bl}{-size?}` to only round one corner an element.
+
+@component('_partials.code-sample', ['class' => 'flex justify-around text-sm'])
+<div class="bg-grey-light mr-3 p-4 rounded-tl-lg">.rounded-tl-lg</div>
+<div class="bg-grey-light mr-3 p-4 rounded-tr-lg">.rounded-tr-lg</div>
+<div class="bg-grey-light mr-3 p-4 rounded-br-lg">.rounded-br-lg</div>
+<div class="bg-grey-light p-4 rounded-bl-lg">.rounded-bl-lg</div>
+@slot('code')
+<div class="rounded-tl-lg"></div>
+<div class="rounded-tr-lg"></div>
+<div class="rounded-br-lg"></div>
+<div class="rounded-bl-lg"></div>
 @endslot
 @endcomponent
 
@@ -157,12 +337,12 @@ For more information about Tailwind's responsive design features, check out the
 @endslot
 @slot('sm')
 <div class="flex justify-center">
-  <div class="bg-grey w-12 h-12 rounded rounded-t"></div>
+  <div class="bg-grey w-12 h-12 rounded-t"></div>
 </div>
 @endslot
 @slot('md')
 <div class="flex justify-center">
-  <div class="bg-grey w-12 h-12 rounded-lg rounded-b"></div>
+  <div class="bg-grey w-12 h-12 rounded-b-lg"></div>
 </div>
 @endslot
 @slot('lg')
@@ -172,11 +352,11 @@ For more information about Tailwind's responsive design features, check out the
 @endslot
 @slot('xl')
 <div class="flex justify-center">
-  <div class="bg-grey w-12 h-12 rounded rounded-r"></div>
+  <div class="bg-grey w-12 h-12 rounded-r"></div>
 </div>
 @endslot
 @slot('code')
-<div class="none:rounded sm:rounded-t md:rounded-lg md:rounded-b lg:rounded-none xl:rounded xl:rounded-r ...">
+<div class="none:rounded sm:rounded-t md:rounded-b-lg lg:rounded-none xlrounded-r ...">
   <!-- ... -->
 </div>
 @endslot
@@ -186,16 +366,14 @@ For more information about Tailwind's responsive design features, check out the
 
 By default Tailwind provides five border radius size utilities. You can change, add, or remove these by editing the `borderRadius` section of your Tailwind config.
 
-If a `default` border radius is provided, it will be used for the non-suffixed `.rounded` utility. Any other keys will be used as suffixes, for example the key `'2'` will create a corresponding `.rounded-2` utility.
-
 Note that only the different border radius *sizes* can be customized; the utilities for controlling which side to round (like `.rounded-t`) aren't customizable.
 
 @component('_partials.customized-config', ['key' => 'borderRadius'])
+  'none': '0',
+- 'sm': '.125rem',
 - default: '.25rem',
 + default: '4px',
-- 'sm': '.125rem',
 - 'lg': '.5rem',
 - 'full': '9999px',
 + 'large': '12px',
-  'none': '0',
 @endcomponent
diff --git a/docs/source/docs/examples/alerts.blade.md b/docs/source/docs/examples/alerts.blade.md
index d35f4b55b12e..dd47ef44bcd2 100644
--- a/docs/source/docs/examples/alerts.blade.md
+++ b/docs/source/docs/examples/alerts.blade.md
@@ -31,10 +31,10 @@ description: null
 
 @component('_partials.code-sample', ['lang' => 'html'])
 <div role="alert">
-  <div class="bg-red text-white font-bold rounded rounded-t px-4 py-2">
+  <div class="bg-red text-white font-bold rounded-t px-4 py-2">
     Danger
   </div>
-  <div class="border border-t-0 border-red-light rounded rounded-b bg-red-lightest px-4 py-3 text-red-dark">
+  <div class="border border-t-0 border-red-light rounded-b bg-red-lightest px-4 py-3 text-red-dark">
     <p>Something not ideal might be happening.</p>
   </div>
 </div>
@@ -52,7 +52,7 @@ description: null
 ### Top Accent Border
 
 @component('_partials.code-sample', ['lang' => 'html'])
-<div class="bg-teal-lightest border-t-4 border-teal rounded rounded-b text-teal-darkest px-4 py-3 shadow-md" role="alert">
+<div class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md" role="alert">
   <div class="flex">
     <svg class="h-6 w-6 text-teal mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg>
     <div>
diff --git a/docs/source/docs/examples/buttons.blade.md b/docs/source/docs/examples/buttons.blade.md
index 1e42b1e96306..6e7d5a7580b3 100644
--- a/docs/source/docs/examples/buttons.blade.md
+++ b/docs/source/docs/examples/buttons.blade.md
@@ -86,20 +86,20 @@ description: null
 </button>
 @endcomponent
 
-### Button Groups
+### Groups
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
 <div class="inline-flex">
-  <button class="bg-smoke hover:bg-smoke-dark text-slate-dark font-bold py-2 px-4 rounded rounded-l">
+  <button class="bg-smoke hover:bg-smoke-dark text-slate-dark font-bold py-2 px-4 rounded-l">
     Prev
   </button>
-  <button class="bg-smoke hover:bg-smoke-dark text-slate-dark font-bold py-2 px-4 rounded rounded-r">
+  <button class="bg-smoke hover:bg-smoke-dark text-slate-dark font-bold py-2 px-4 rounded-r">
     Next
   </button>
 </div>
 @endcomponent
 
-### w/Icon
+### Icons
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
 <button class="bg-smoke hover:bg-smoke-dark text-slate-dark font-bold py-2 px-4 rounded inline-flex items-center">
diff --git a/docs/source/docs/examples/cards.blade.md b/docs/source/docs/examples/cards.blade.md
index 27d6538ea026..a011f683faf8 100644
--- a/docs/source/docs/examples/cards.blade.md
+++ b/docs/source/docs/examples/cards.blade.md
@@ -29,9 +29,9 @@ description: null
 
 @component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])
 <div class="max-w-md w-full lg:flex">
-  <div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded rounded-t lg:rounded lg:rounded-l text-center overflow-hidden" style="background-image: url('{{ $page->baseUrl }}/img/card-left.jpg')" title="Woman holding a mug">
+  <div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden" style="background-image: url('{{ $page->baseUrl }}/img/card-left.jpg')" title="Woman holding a mug">
   </div>
-  <div class="border-r border-b border-l border-grey-light lg:border-l-0 lg:border-t lg:border-grey-light bg-white rounded rounded-b lg:rounded lg:rounded-r p-4 flex flex-col justify-between leading-normal">
+  <div class="border-r border-b border-l border-grey-light lg:border-l-0 lg:border-t lg:border-grey-light bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
     <div class="mb-8">
       <p class="text-sm text-grey-dark flex items-center">
         <svg class="text-grey w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
diff --git a/docs/source/docs/examples/navigation.blade.md b/docs/source/docs/examples/navigation.blade.md
index a68f0e56335a..ab81c1aa5ed8 100644
--- a/docs/source/docs/examples/navigation.blade.md
+++ b/docs/source/docs/examples/navigation.blade.md
@@ -62,7 +62,7 @@ description: null
 @component('_partials.code-sample')
 <ul class="list-reset flex border-b">
   <li class="-mb-px mr-1">
-    <a class="bg-white inline-block border-l border-t border-r rounded rounded-t py-2 px-4 text-blue-dark font-semibold" href="#">Active</a>
+    <a class="bg-white inline-block border-l border-t border-r rounded-t py-2 px-4 text-blue-dark font-semibold" href="#">Active</a>
   </li>
   <li class="mr-1">
     <a class="bg-white inline-block py-2 px-4 text-blue hover:text-blue-darker font-semibold" href="#">Tab</a>
diff --git a/docs/source/docs/functions-and-directives.blade.md b/docs/source/docs/functions-and-directives.blade.md
index ce8cf68e8ea8..c8c619d9ddba 100644
--- a/docs/source/docs/functions-and-directives.blade.md
+++ b/docs/source/docs/functions-and-directives.blade.md
@@ -29,8 +29,8 @@ Use the `@@tailwind` directive to insert Tailwind's `preflight`, `utilities` and
 /**
  * Use this directive to control where Tailwind injects the responsive
  * variations of each utility.
- * 
- * If omitted, Tailwind will append these classes to the very end of 
+ *
+ * If omitted, Tailwind will append these classes to the very end of
  * your stylesheet by default.
  */
  @@tailwind screens;
diff --git a/docs/tailwind.js b/docs/tailwind.js
index 52cc443e5d0a..23838d01a51e 100644
--- a/docs/tailwind.js
+++ b/docs/tailwind.js
@@ -78,8 +78,14 @@ config.padding = Object.assign(config.padding, {
   '80': '20rem',
 })
 
-config.margin = config.padding
+config.margin = Object.assign(config.margin, {
+  '10': '2.5rem',
+  '12': '3rem',
+  '16': '4rem',
+  '20': '5rem',
+  '80': '20rem',
+})
 
-config.negativeMargin = config.padding
+config.negativeMargin = config.margin
 
 module.exports = config
diff --git a/src/generators/rounded.js b/src/generators/rounded.js
index b251725a252f..8ef553db1fb8 100644
--- a/src/generators/rounded.js
+++ b/src/generators/rounded.js
@@ -1,35 +1,44 @@
 import _ from 'lodash'
-import defineClass from '../util/defineClass'
 import defineClasses from '../util/defineClasses'
 
-function sideVariants() {
+function sizedBorder(radius, modifier) {
+  modifier = modifier === 'default' ? '' : `-${modifier}`
+
   return defineClasses({
-    'rounded-t': {
-      'border-bottom-right-radius': '0',
-      'border-bottom-left-radius': '0',
+    [`rounded${modifier}`]: {
+      'border-radius': `${radius}`,
+    },
+    [`rounded-t${modifier}`]: {
+      'border-top-left-radius': `${radius}`,
+      'border-top-right-radius': `${radius}`,
+    },
+    [`rounded-r${modifier}`]: {
+      'border-top-right-radius': `${radius}`,
+      'border-bottom-right-radius': `${radius}`,
+    },
+    [`rounded-b${modifier}`]: {
+      'border-bottom-right-radius': `${radius}`,
+      'border-bottom-left-radius': `${radius}`,
+    },
+    [`rounded-l${modifier}`]: {
+      'border-top-left-radius': `${radius}`,
+      'border-bottom-left-radius': `${radius}`,
+    },
+    [`rounded-tl${modifier}`]: {
+      'border-top-left-radius': `${radius}`,
     },
-    'rounded-r': {
-      'border-bottom-left-radius': '0',
-      'border-top-left-radius': '0',
+    [`rounded-tr${modifier}`]: {
+      'border-top-right-radius': `${radius}`,
     },
-    'rounded-b': {
-      'border-top-left-radius': '0',
-      'border-top-right-radius': '0',
+    [`rounded-br${modifier}`]: {
+      'border-bottom-right-radius': `${radius}`,
     },
-    'rounded-l': {
-      'border-top-right-radius': '0',
-      'border-bottom-right-radius': '0',
+    [`rounded-bl${modifier}`]: {
+      'border-bottom-left-radius': `${radius}`,
     },
   })
 }
 
 module.exports = function({ borderRadius }) {
-  return _(borderRadius)
-    .map((radius, modifier) => {
-      return defineClass(modifier === 'default' ? 'rounded' : `rounded-${modifier}`, {
-        'border-radius': radius,
-      })
-    })
-    .concat(sideVariants())
-    .value()
+  return _.flatMap(borderRadius, sizedBorder)
 }