CSS border Archives - csshint - A designer hub

CSS border Archives - csshint - A designer hub https://csshint.com/tag/css-border/ Sun, 19 Feb 2023 15:49:30 +0000 en-US hourly 1 https://wordpress.org/?v=6.3.4 10 CSS Border Examples https://csshint.com/css-border-examples/ Tue, 21 May 2019 10:30:03 +0000 http://csshint.com/?p=894 Latest Collection of hand-picked free HTML and CSS border code examples. 1.Interactive button border See the Pen Interactive button border by Tobias Reich (@electerious) on CodePen. Author Tobias Reich Made with HTML / CSS (SCSS) / JavaScript (Babel) demo and code Get Hosting 2.Magic borders See the Pen Magic borders by Saeed Alipoor (@saeedalipoor) on […]

The post 10 CSS Border Examples appeared first on csshint - A designer hub.

]]> Latest Collection of hand-picked free HTML and CSS border code examples.

1.Interactive button border

<br /> See the Pen <a href='https://codepen.io/electerious/pen/GzrmwB/'>Interactive button border</a> by Tobias Reich<br /> (<a href='https://codepen.io/electerious'>@electerious</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Tobias Reich

Made with

HTML / CSS (SCSS) / JavaScript (Babel)

demo and code Get Hosting

2.Magic borders

<br /> See the Pen <a href='https://codepen.io/saeedalipoor/pen/XORedo/'>Magic borders</a> by Saeed Alipoor<br /> (<a href='https://codepen.io/saeedalipoor'>@saeedalipoor</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Saeed Alipoor

Made with

HTML / CSS (SCSS)

demo and code Get Hosting

3.Sketchy border test

<br /> See the Pen <a href='https://codepen.io/andybelldesign/pen/MPLzay/'>Sketchy border test</a> by Andy Bell<br /> (<a href='https://codepen.io/andybelldesign'>@andybelldesign</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Andy Bell

Made with

HTML / CSS (SCSS)

demo and code Get Hosting

4.CSS Gradient Clip-Path Borders

Author

George W. Park

Made with

HTML / CSS

demo and code Get Hosting

5.Fancy Border Box

<br /> See the Pen <a href='https://codepen.io/MyXoToD/pen/VaazQq/'>Fancy Border Box</a> by Max<br /> (<a href='https://codepen.io/MyXoToD'>@MyXoToD</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Max

Made with

HTML (Haml) / CSS (SCSS)

demo and code Get Hosting

6.“comic style” border

<br /> See the Pen <a href='https://codepen.io/mp/pen/ldAFs/'>"comic style" border</a> by michael picker<br /> (<a href='https://codepen.io/mp'>@mp</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

michael picker

Made with

HTML / CSS

demo and code Get Hosting

7.Border-radius weave

<br /> See the Pen <a href='https://codepen.io/uniphil/pen/BwHti/'>Border-radius weave</a> by uniphil<br /> (<a href='https://codepen.io/uniphil'>@uniphil</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

uniphil

Made with

HTML / CSS (Sass)

demo and code Get Hosting

8.Jagged border – top

<br /> See the Pen <a href='https://codepen.io/HollowMan/pen/uwstc/'>Jagged border – top </a> by HollowMan<br /> (<a href='https://codepen.io/HollowMan'>@HollowMan</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

HollowMan

Made with

HTML / CSS (Less)

demo and code Get Hosting

9.Reddit border inset challenge

<br /> See the Pen <a href='https://codepen.io/daviddarnes/pen/oEEqdp/'>Reddit border inset challenge</a> by David Darnes<br /> (<a href='https://codepen.io/daviddarnes'>@daviddarnes</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

David Darnes

Made with

HTML / CSS (SCSS)

demo and code Get Hosting

10.rounded side border radius

<br /> See the Pen <a href='https://codepen.io/joeashworth/pen/PXvRzb/'>rounded side border radius</a> by Joe<br /> (<a href='https://codepen.io/joeashworth'>@joeashworth</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Joe

Made with

HTML / CSS

demo and code Get Hosting

The post 10 CSS Border Examples appeared first on csshint - A designer hub.

]]>