From 61bdfbfc63edeaec5c2f101a9aa9ecfd7dbf511f Mon Sep 17 00:00:00 2001 From: jbranchaud Date: Fri, 22 Nov 2019 16:34:21 -0600 Subject: [PATCH] Add Circular Icons With A Massive Border Radius as a css til --- README.md | 3 ++- css/circular-icons-with-a-massive-border-radius.md | 13 +++++++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 css/circular-icons-with-a-massive-border-radius.md diff --git a/README.md b/README.md index 9dd1611..f11c57f 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ and pairing with smart people at Hashrocket. For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud). -_873 TILs and counting..._ +_874 TILs and counting..._ --- @@ -96,6 +96,7 @@ _873 TILs and counting..._ - [Animate Smoothly Between Two Background Colors](css/animate-smoothly-between-two-background-colors.md) - [Apply Multiple Box Shadows To Single Element](css/apply-multiple-box-shadows-to-single-element.md) - [Apply Styles To The Last Child Of A Specific Type](css/apply-styles-to-the-last-child-of-a-specific-type.md) +- [Circular Icons With A Massive Border Radius](css/circular-icons-with-a-massive-border-radius.md) - [Dry Up SCSS With Mixins](css/dry-up-scss-with-mixins.md) - [Lighten And Darken With CSS Brightness Filter](css/lighten-and-darken-with-css-brightness-filter.md) - [Lighten And Darken With SCSS](css/lighten-and-darken-with-scss.md) diff --git a/css/circular-icons-with-a-massive-border-radius.md b/css/circular-icons-with-a-massive-border-radius.md new file mode 100644 index 0000000..72eb964 --- /dev/null +++ b/css/circular-icons-with-a-massive-border-radius.md @@ -0,0 +1,13 @@ +# Circular Icons With A Massive Border Radius + +Elements by nature are rectangular. By adding some `border-radius`, you can +soften the edges a bit. If you add a massive amount of `border-radius`, you +effectively make the element round. + +```css +div.circle { + border-radius: 50000px; +} +``` + +Here is a [live example](https://codepen.io/jbranchaud/pen/bGGJKJW).