From ff61ee157811a1986086498bffc799ed89dfb90f Mon Sep 17 00:00:00 2001
From: Alexandr Shevchuk <34628096+redrobot753@users.noreply.github.com>
Date: Fri, 10 Apr 2020 02:03:17 +0300
Subject: [PATCH 1/3] Create gradient-border-with-radius.md

Create gradient-border-with-radius snippet
---
 snippets/gradient-border-with-radius.md | 46 +++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 snippets/gradient-border-with-radius.md

diff --git a/snippets/gradient-border-with-radius.md b/snippets/gradient-border-with-radius.md
new file mode 100644
index 000000000..5e7e22e20
--- /dev/null
+++ b/snippets/gradient-border-with-radius.md
@@ -0,0 +1,46 @@
+---
+title: Gradient border with radius
+tags: visual,intermediate
+---
+
+Makes a gradient border with radius.
+
+```html
+<div class="gradient-border"></div>
+```
+
+```css
+.gradient-border {
+  width: 300px;
+  height: 300px;
+  position: relative;
+  border: solid 1px transparent;
+  border-radius: 10px;
+  background-color: #f7f7fe;
+  background-clip: padding-box;
+}
+.gradient-border::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  margin: -1px;
+  border-radius: inherit;
+  background: linear-gradient(to bottom, #d3e7ec, #fff);
+}
+```
+
+#### 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.
+
+#### Browser support
+
+- https://caniuse.com/#feat=mdn-css_properties_background_background-clip

From f1c772206875909c18343b630b6b552dc10746c9 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Fri, 17 Apr 2020 15:53:12 +0300
Subject: [PATCH 2/3] Update and rename gradient-border-with-radius.md to
 gradient-border.md

---
 ...rder-with-radius.md => gradient-border.md} | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)
 rename snippets/{gradient-border-with-radius.md => gradient-border.md} (54%)

diff --git a/snippets/gradient-border-with-radius.md b/snippets/gradient-border.md
similarity index 54%
rename from snippets/gradient-border-with-radius.md
rename to snippets/gradient-border.md
index 5e7e22e20..ef493c7a0 100644
--- a/snippets/gradient-border-with-radius.md
+++ b/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
 

From d0768f03b3b95b076acc6d57734398019de97fb5 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Fri, 17 Apr 2020 15:53:47 +0300
Subject: [PATCH 3/3] Update gradient-border.md

---
 snippets/gradient-border.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/snippets/gradient-border.md b/snippets/gradient-border.md
index ef493c7a0..cf093f4f8 100644
--- a/snippets/gradient-border.md
+++ b/snippets/gradient-border.md
@@ -6,7 +6,9 @@ tags: visual,intermediate
 Creates a gradient border.
 
 ```html
-<div class="gradient-border"></div>
+<div class="gradient-border">
+  <p>Gradient border!</P>
+</div>
 ```
 
 ```css