Offset And Xor Frame: Lively

4.03.2021

Made with: HTML,CSS (SCSS)

View Code

Offset And Xor Frame: Lively

Use Svg For Border-Image

25.08.2020

Made with: HTML,CSS (SCSS)

View Code

PlaceholderUse Svg For Border-Image

Css Gradient Borders

3.08.2020

Made with: HTML,CSS (SCSS)

View Code

Css Gradient Borders

Borders & Gradients

31.03.2020

Made with: HTML,CSS (Less)

View Code

Borders & Gradients

Multiple Border-Radius Values

29.03.2020

You probably knew that you can set the border-radius of an element to 4 values, and using shorthand, it goes clock-wise from top, right, bottom, left. But did you know you can actually set up to 8 values if you separate them? Each corner can have 2 values as you can see in this example.

Made with: HTML,CSS

View Code

Multiple Border-Radius Values

Css Candy Stripe Border Using Clip-Path

5.03.2020

Create a responsive candy stripe border using the clip-path property on each of the list items in a ul. Change the height, background color, and stripe color very easily.

Made with: HTML (Pug),CSS (Sass)

View Code

Css Candy Stripe Border Using Clip-Path

Pure Css Circular Border Patterns

27.12.2019

The border patterns are created with clip-path on a pseudo-element.

Made with: HTML (Pug),CSS (SCSS)

View Code

Pure Css Circular Border Patterns

Fitted Border Image The Easy Way

12.12.2019

Made with: HTML,CSS (SCSS)

View Code

PlaceholderFitted Border Image The Easy Way

Map-Inspired Border

21.03.2019

Map-inspired border effect using stacked border & box-shadows. Single HTML element with CSS.

Made with: HTML,CSS (SCSS)

View Code

Map-Inspired Border

Blurred Border

15.03.2019

Made with: HTML,CSS (SCSS)

View Code

Blurred Border

Magic Borders

2.02.2019

Try to have a dynamic and responsive table that has borders only between cells.

Made with: HTML,CSS (SCSS)

View Code

PlaceholderMagic Borders

Interactive Button Border

31.01.2019

Button with an interactive border gradient.

Made with: HTML,CSS (SCSS),JavaScript (Babel)

View Code

PlaceholderInteractive Button Border

Gradient Border

18.01.2019

HTML and CSS gradient border without pseudo elements.

Made with: HTML,CSS (SCSS)

View Code

Gradient Border

Rounded Side

17.01.2019

Made with: HTML,CSS

View Code

PlaceholderRounded Side

Animated Border On Hover

17.01.2019

Card with animated left border on hover.

Made with: HTML,CSS

View Code

PlaceholderAnimated Border On Hover

Css Quote Box Hover Effects

16.01.2019

Made with: HTML (Pug),CSS (SCSS)

View Code

PlaceholderCss Quote Box Hover Effects

Sketchy Border

26.10.2018

Using 8 border-radius values can be pretty dope. This example shows how using it on the element and its ::before pseudo element can create a sketchy look and feel.

Made with: HTML,CSS (SCSS)

View Code

Sketchy Border

Css Gradient Clip-Path Borders

7.05.2018

This example shows how the CSS clip-path property can be used to create a variety of shaped gradient borders.

Made with: HTML,CSS

View Code

Css Gradient Clip-Path Borders