• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » Various » A Cool Collection Of CSS Gradient Border And How To Use Them

A Cool Collection Of CSS Gradient Border And How To Use Them

By Sigit Prasetya Nugroho ∙ August 17, 2019 ∙ Various ∙ Leave a Comment

Share : TwitterFacebookTelegramWhatsapp

If you are bored with CSS border colors on buttons or picture frames on your web pages, replacing with border gradient is the right idea. CSS3 allows us to explore colors precisely the colors on the borders of an HTML element. If in the past, we only knew dull colors on borders such as red, black, green even to make a border color gradient, we have to outsmart it by adding a gradient image background. In the CSS3 era, all that could be made with just one line of CSS code. This tutorial will show you how to use gradient border in css.

Table of Contents

  • 1 Definition of Gradients Color
    • 1.1 Make Gradient Border CSS
    • 1.2 Property border-image-source
    • 1.3 Property border-image-slice
    • 1.4 Shorthand border-image-source and border-image-slice with border-image.
  • 2 Various of CSS gradients border
    • 2.1 Create a linear gradient border CSS
    • 2.2 Create radial-gradient border CSS
    • 2.3 Create conic CSS gradient border
  • 3 Conclusion

Definition of Gradients Color

My assumption, you all already know what gradient color is? Gradient or color gradation is a color scheme that can be developed from two or more colors so that it makes certain levels of color by not destroying and changing the color itself.

In other words, the gradient color is the color development or color changes that occur when two or more colors are combined.

Examples of color gradients :

Color Gradient Example

What if we want to apply a border color gradient like the following button image?
Gradient Border Css ButtonOf course, it can be overcome with CSS3. Still curious? Don’t worry, I’ll share some recent CSS border gradient examples.

Tutorial Gradient Border Css With Example

Make Gradient Border CSS

CSS allows us to manipulate or change the size, color, and style or shape of the border. If you previously used the border property in CSS. To create a gradient border requires border-image-source and border-image-slice properties. This feature is only owned by CSS3. So before using CSS3, make sure the your browser supported (Use the latest browser).

Property border-image-source

a CSS property is used to specify the source of the image used to create the border-image of the HTML element.

Border-image-source values can be URLs to rasters, vector-based images (SVG), or URI data.

Property border-image-slice

The border-image-slice CSS property divides the image specified by border-image-source into 9 regions. This region forms the components of the border-image element.

border-image-slice used to effect the desired gradient CSS border reached.

Example border gradient

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
div{
    margin: 0 auto;
    width: 250px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box {
    border: 10px solid;
    border-image-source : linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 27%, rgba(0,212,255,1) 100%);
    border-image-slice : 1;
}
</style>

Gradient Border Css Example Min

Shorthand border-image-source and border-image-slice with border-image.

border-image is used to shorten the use of border-image-source and border-image-slice properties.

Here’s the same example as before using border-image:

1
2
3
4
.box {
    border: 10px solid;
    border-image : linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 27%, rgba(0,212,255,1) 100%) 1;
}

Various of CSS gradients border

To create a gradient border, we can use 3 types: linear, radial, and conic gradient.

Create a linear gradient border CSS

To make a linear gradient, we use the linear-gradient function in CSS. The linear-gradient() function creates an image consisting of several color transitions along in straight line.

Example left-right linear border gradient:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
div{
margin: 0 auto;
width: 250px;
height: 250px;
display: flex;
align-items: center;
justify-content: center;
}
.box {
border: 10px solid;
        border-image-source : linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
border-image-slice : 1;
}
button{
      height:100px;
      width:200px;
      background-color:black;
      color:white;
      font-size:22px;
      margin : 0 auto;
      border: 3px solid;
      border-image-source: linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
      border-image-slice :1;
}

Left To Right Linear Css Gradient Border Min

Example top-bottom linear border gradient:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
div{
margin: 0 auto;
width: 250px;
height: 250px;
display: flex;
align-items: center;
        justify-content: center;
}
.box {
border: 10px solid;
        border-image-source : linear-gradient(to bottom, #f64f59, #c471ed, #12c2e9);  
border-image-slice : 1;
}
button{
        height:100px;
        width:200px;
        background-color:black;
        color:white;
        font-size:22px;
margin : 0 auto;
border: 3px solid;
border-image-source: linear-gradient(to top, #f64f59, #c471ed, #12c2e9);
border-image-slice :1;
}

Top And Bottom Linear Gradient Css Min

Create radial-gradient border CSS

To create a radial gradient, you can use the radial-gradient() function in CSS. radial-gradient() CSS makes progressive transitions of some colors that radiate from the origin.

Example of radial border gradient:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
div {
margin: 0 auto;
width: 250px;
height: 250px;
display: flex;
align-items: center;
justify-content: center;
}
 
.box {
border: 10px solid;
border-image-source: radial-gradient(circle, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
border-image-slice: 1;
}
 
button {
height: 100px;
width: 200px;
background-color: black;
color: white;
font-size: 22px;
margin: 0 auto;
border: 3px solid;
border-image-source: radial-gradient(circle, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
border-image-slice: 1;
}

Radial Gradient Border Css

Create conic CSS gradient border

The conic-gradient() function creates a gradient color that is rotated around the midpoint.

Example :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
div {
margin: 0 auto;
width: 250px;
height: 250px;
display: flex;
align-items: center;
justify-content: center;
}
 
.box {
border: 10px solid;
border-image-source: conic-gradient(red, orange, yellow, green, blue);
border-image-slice: 1;
}
 
button {
height: 100px;
width: 200px;
background-color: black;
color: white;
font-size: 22px;
margin: 0 auto;
border: 3px solid;
border-image-source: conic-gradient(red, orange, yellow, green, blue);
border-image-slice: 1;
}

Conic Gradient Function Min

Conclusion

In CSS3, we can build web design without images. Unlike before, we made css gradient border using border image that cause web pages to become heavy. Using CSS3, we can experiment without limits.

The CSS border gradient can be used on all HTML elements like div, span, button.

Reference : https://developer.mozilla.org/id/docs/Web/CSS/border-image-source

Thus a brief tutorial on gradient border in CSS may be useful.

 

Another Various Related Post :

  • 5 Best ReactJS Books Journey To Hero (Must Have)
  • 6 Best Google Chrome Extensions To Increase Developers Productivity In 2020
  • 5 Best Online Programming Learning Courses Sites
  • Work From Home Application That Helps Amid the Coronavirus pandemic
  • 8 Top-quality Ebookshare Websites To Download Free E-books And Safe From Malware
  • Transfer Your Hand Lettering With The Best Handwriting Fonts Tools ( MyScriptFont )

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Welcome to my Home,

Avatar for Sigit Prasetya NugrohoThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (7) Publisher Tips (5) react (3) Reactjs (7) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) widget (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2021 Seegatesite.com