Update and rename gradient-border-with-radius.md to gradient-border.md

snippets/gradient-border.md

@@ -1,9 +1,9 @@
 ---
-title: Gradient border with radius
+title: Gradient border
 tags: visual,intermediate
 ---
 
-Makes a gradient border with radius.
+Creates a gradient border.
 
 ```html
 <div class="gradient-border"></div>
@@ -11,15 +11,16 @@ Makes a gradient border with radius.
 
 ```css
 .gradient-border {
-  width: 300px;
-  height: 300px;
   position: relative;
   border: solid 1px transparent;
   border-radius: 10px;
   background-color: #f7f7fe;
   background-clip: padding-box;
+  margin: 8px;
+  padding: 8px 16px;
 }
-.gradient-border::before {
+
+.gradient-border:before {
   content: '';
   position: absolute;
   top: 0;
@@ -35,11 +36,10 @@ Makes a gradient border with radius.
 
 #### Explanation
 
-- Create a block with a transparent border, relative position and some background.
-- Make a absolutely positioned substrate with `::before` pseudo-element with gradient background and `z-index: -1`.
-- Use `top: 0`, `right: 0`, `bottom: 0`, `left: 0` to make the substrate equal to block.
-- Negate the substrate height and width using `margin: -1px` to make substrate bigger then block.
-- Use `background-clip: padding-box` to not draw block's background below the border.
+- Create a block with a transparent border, relative position and a background.
+- Absolute position the `:before` pseudo-element with a gradient background and `z-index: -1`.
+- Use `top: 0`, `right: 0`, `bottom: 0`, `left: 0` to make the pseudo-element equal size to its parent element, `margin: -1px` to make it larger.
+- Use `background-clip: padding-box` to not draw the parent element's background below the border.
 
 #### Browser support