Красивое оформление border css

43 CSS Borders

Collection of hand-picked free HTML and CSS border code examples from Codepen, GitHub and other resources. Update of May 2021 collection. 15 new items.

Related Articles

Author

Links

Made with

About a code

Animated Border Image

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Partial Gradient Border

Partial gradient border surrounding a circle image, which is done with a CSS conic gradient and a radial gradient mask.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Gradient Border with Rounded Corners

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Background Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Patterned Borders

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Custom Dashed Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Colorful Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Gradient Border Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Gradient Border + Transparent Background

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Border Linear-Gradient + Border-Radius

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Corner-only Border

Corner-only border (allows for corner rounding & gradient border).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

8bit border-image

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

8-bit Pixel Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Avatar Border Effect. 15 Declarations, 1 Element, No Pseudos

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Use SVG for border-image

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

CSS Gradient Borders

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Borders & Gradients

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Multiple Border-Radius Values

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

CSS Candy Stripe Border Using Clip-Path

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Offset and XOR Frame: Lively

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Full Screen Vintage Frame with Multiple Borders

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Gradient Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Pure CSS Circular Border Patterns

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About a code

Fitted Border Image the Easy Way

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About a code

Map-Inspired Border

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Blurred Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Magic Borders

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Interactive Button Border

Button with an interactive border gradient.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Источник

30+ Ultimate Collection of CSS Border Styles for Web Designers

Even the most experienced programmers may find debugging CSS to be a difficult task. This article will provide you with time-saving and workflow-enhancing advice on how to debug CSS borders like an expert.

Title:- over.css
Author:- Ian Lunn
Made With:- HTML CSS JAVASCRIPT

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Similar Posts

40 Best CSS Neumorphism Example to Downlaod

See the Pen css Neumorphism design practice 02 by CMYK350dpi (@AYV) on CodePen. Title:- css Neumorphism design practice 02Author:- CMYK350dpiMade With:- CSS HTML JS See the Pen Neumorphism Working Analog Clock by Muhammad Fadzrin Madu (@fadzrinmadu) on CodePen. Title:- Neumorphism Working Analog ClockAuthor:- Muhammad Fadzrin MaduMade With:- CSS HTML JS See the Pen Neumorphism “buttons”…

20+ Search Bar design using HTML,CSS AND JAVASCRIPT -GS CODE

Gscode will discuss excellent search bar design and where to get great search bar design inspiration from Just a simple responsive search box Author Emily Huang Made With HTML,CSS Demo Check Out Demo Links Download Flat CSS search box concept with loading animation Author Ines Montani Made With html(pug),css(sass),js Demo Check Out Demo Links Download Search Form With Animated Search…

15+ CSS Fire Animation Code Example

See the Pen Canvas Particle Flame by Jack Rugile (@jackrugile) on CodePen. Title:- Canvas Particle FlameAuthor:-Jack RugileMade With:-HTML CSS JS See the Pen CSS Fire by olex (@z) on CodePen. Title:- CSS FireAuthor:-Zed DashMade With:-HTML CSS JS See the Pen Pure CSS fire! by rafaelcastrocouto (@rafaelcastrocouto) on CodePen. Title:- Pure CSS fire!Author:-rafaelcastrocoutoMade With:-HTML CSS JS…

The Best 20+ CSS tabs Example – GSCODE

See the Pen Pure CSS Tabs With Indicator by Alex (@woranov) on CodePen. Title:-Pure CSS Tabs Design With IndicatorAuthor:-AlexMade With:-HTML,CSS,JS See the Pen Pure CSS Tabs by Wallace Erick (@wallaceerick) on CodePen. Title:-Pure CSS TabsAuthor:-Wallace ErickMade With:-HTML,CSS,JS See the Pen II just another Css tabs (:checked) by Kseso (@Kseso) on CodePen. Title:-II just another CSS…

Latest 50+ CSS Toggle Switches Example For Students With Source Code

The latest CSS Toggle Switches topics and ideas 2021 with source We provide Toggle Switches with source code for making website See the Pen Pure CSS Toggles by Rafael González (@rgg) on CodePen. Title:- Pure CSS TogglesAuthor:- Rafael GonzálezMade With:- HTML CSS JAVASCRIPT See the Pen CSS Theme Switcher by Michelle Barker (@michellebarker) on CodePen….

CSS Popup/Modal Design: 35+ Examples for Inspiration

Every site developer should have access to CSS Popup/Modal design. You may create amazing and captivating user experiences for your website by using the 35+ examples CSS Popup/Modal provided here, which demonstrate the power of CSS. Title:-Password Modal with Finite State Machine Author:-David Khourshid Made with:- HTML CSS JS Title:-Nifty Modal Window or Slider Effects…

Источник