Skip to content

30+ CSS border Style example

    See the Pen CSS Border transitions by Giana (@giana) on CodePen.

    Title:- CSS Border style transitions
    Author:- Giana
    Made With:- HTML CSS JAVASCRIPT

    See the Pen [PURE CSS] border animation without svg by Rplus (@Rplus) on CodePen.

    Title:- [PURE CSS] border animation without svg
    Author:- Rplus
    Made With:- HTML CSS

    See the Pen Imperfect Buttons by Tiffany Rayside (@tmrDevelops) on CodePen.

    Title:- Imperfect Buttons
    Author:- Tiffany Rayside
    Made With:- HTML CSS

    See the Pen Sass button border hover effect mixin by Giana (@giana) on CodePen.

    Title:- Sass button border hover effect mixin
    Author:- Giana
    Made With:- HTML CSS

    See the Pen CSS Border Animation by Nick (@Huhtamaki) on CodePen.

    Title:- CSS Border Animation
    Author:- Nick
    Made With:- HTML CSS

    See the Pen CSS border (using an SVG) by Louis Hoebregts (@Mamboleoo) on CodePen.

    Title:- CSS border (using an SVG)
    Author:- Louis Hoebregts
    Made With:- HTML CSS

    See the Pen Single element CSS border animation & ripple by Peter Norton (@graphilla) on CodePen.

    Title:- Single element CSS border animation & ripple
    Author:- Peter Norton
    Made With:- HTML CSS

    See the Pen Colorful CSS Buttons by Chris Deacy (@chrisdothtml) on CodePen.

    Title:- Colorful CSS Buttons
    Author:- Chris Deacy
    Made With:- HTML CSS

    See the Pen Button Hover States by James Power (@thejamespower) on CodePen.

    Title:- Button Hover States
    Author:- James Power
    Made With:- HTML CSS

    See the Pen Animated CSS Gradient Border by Mike Schultz (@mike-schultz) on CodePen.

    Title:- Animated CSS Gradient Border
    Author:- Mike Schultz
    Made With:- HTML CSS

    See the Pen Sass button border hover effect mixin by Giana (@giana) on CodePen.

    Title:- Sass button border hover effect mixin
    Author:- Giana
    Made With:- HTML CSS

    See the Pen Gradient text border background Button With Animation by Monkey Company (@monkey-company) on CodePen.

    Title:- Gradient text border background Button With Animation
    Author:- Monkey Company
    Made With:- HTML CSS

    See the Pen Border animation (circle) by katmai7 (@katmai7) on CodePen.

    Title:- Border animation (circle)
    Author:- katmai7
    Made With:- HTML CSS

    See the Pen border-animation-css by Swarup Kumar Kuila (@uiswarup) on CodePen.

    Title:- border-animation-css
    Author:- Swarup Kumar Kuila
    Made With:- HTML CSS

    See the Pen SVG Border Animation 1 by Zach Saucier (@ZachSaucier) on CodePen.

    Title:- SVG Border Animation 1
    Author:- Zach Saucier
    Made With:- HTML CSS

    See the Pen [PURE CSS] border animation without svg by Rplus (@Rplus) on CodePen.

    Title:- [PURE CSS] border animation without svg
    Author:- Rplus
    Made With:- HTML CSS

    See the Pen Border-gradient mixin by John Grishin (@exah) on CodePen.

    Title:- [PURE CSS] border animation without svg
    Author:- Rplus
    Made With:- HTML CSS

    See the Pen Border animation by Inderpreet Singh (@Inderpreet23) on CodePen.

    Title:- Border animation
    Author:- Inderpreet Singh
    Made With:- HTML CSS

    See the Pen Rotating border by Jesse B (@Chester) on CodePen.

    Title:- Rotating border
    Author:- Jesse B
    Made With:- HTML CSS

    See the Pen Great button animation by Valentin Galmand (@valentingalmand) on CodePen.

    Title:- Great button animation
    Author:- Valentin Galmand
    Made With:- HTML CSS

    See the Pen Button Border Hover Effects by Sarath AR (@sarath-ar) on CodePen.

    Title:- Button Border Hover Effects
    Author:- Sarath AR
    Made With:- HTML CSS

    See the Pen CSS-only border animation by Danny Joris (@DannyJoris) on CodePen.

    Title:- CSS-only border animation
    Author:- Danny Joris
    Made With:- HTML CSS

    See the Pen True dotted borders using svg and border-image by lucas lemonnier (@luclemo) on CodePen.

    Title:- True dotted borders using svg and border-image
    Author:- lucas lemonnier
    Made With:- HTML CSS

    See the Pen All the border-radius’ by Chris Coyier (@chriscoyier) on CodePen.

    Title:- All the border-radius’
    Author:- Chris Coyier
    Made With:- HTML CSS

    See the Pen Profile Card Hover Effect by P (@petegarvin1) on CodePen.

    Title:- Profile Card Hover Effect
    Author:- P
    Made With:- HTML CSS

    See the Pen Border transformations by yuanchuan (@yuanchuan) on CodePen.

    Title:- Border transformations
    Author:- yuanchuan
    Made With:- HTML CSS

    See the Pen Fancy border button by Tobias Reich (@electerious) on CodePen.

    Title:- Fancy border button
    Author:- Tobias Reich
    Made With:- HTML CSS

    See the Pen CSS transform border button hover effects by Les (@lesbaa) on CodePen.

    Title:- CSS transform border button hover effects
    Author:- Les
    Made With:- HTML CSS

    See the Pen Border Animation Effect with SVG by GIO (@HYPNOS) on CodePen.

    Title:- Border Animation Effect with SVG
    Author:- GIO
    Made With:- HTML CSS

    See the Pen Button Border Slide Mixin by Thomas Vaeth (@thomasvaeth) on CodePen.

    Title:- Button Border Slide Mixin
    Author:- Thomas Vaeth
    Made With:- HTML CSS

    See the Pen Input Focus & Placeholder Effects with CSS3 by Emil Devantie Brockdorff (@Mestika) on CodePen.

    Title:- Input Focus & Placeholder Effects with CSS3
    Author:- Emil Devantie Brockdorff
    Made With:- HTML CSS JAVASCRIPTS

    See the Pen Rainbow Border Button by Chris Coyier (@chriscoyier) on CodePen.

    Title:- Rainbow Border Button
    Author:- Chris Coyier
    Made With:- HTML CSS

    See the Pen Corner Border Link by Vian Esterhuizen (@heyvian) on CodePen.

    Title:- Corner Border Link
    Author:- Vian Esterhuizen
    Made With:- HTML CSS

    See the Pen Gradient border + border-radius by Shaw (@shshaw) on CodePen.

    Title:- Gradient border + border-radius
    Author:- Shaw
    Made With:- HTML CSS

    See the Pen Buttons by Elitsa Dimitrova (@elitsa_dimitrova) on CodePen.

    Title:- Buttons
    Author:- Elitsa Dimitrova
    Made With:- HTML CSS

    See the Pen SVG Gradient Border – Button by fencepencil (@fencepencil) on CodePen.

    Title:- SVG Gradient Border – Button
    Author:- fencepencil
    Made With:- HTML CSS

    See the Pen Border composition and animation by paolo cavanna (@paolocavanna) on CodePen.

    Title:- Border composition and animation
    Author:- paolo cavanna
    Made With:- HTML CSSfr