Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • CSS Tutorial
  • CSS Exercises
  • CSS Interview Questions
  • CSS Selectors
  • CSS Properties
  • CSS Functions
  • CSS Examples
  • CSS Cheat Sheet
  • CSS Templates
  • CSS Frameworks
  • Bootstrap
  • Tailwind
  • CSS Formatter
Open In App
Next Article:
Gradient borders in CSS
Next article icon

How to set gradient border color in CSS?

Last Updated : 17 Apr, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

CSS Gradient Color applies two or more colors by smoothly transitioning between the colors. In this article, we will see how to set the Gradient Border Color of an element using CSS. Gradient Border Color enhances the styling of the element.

Set the Gradient Border using border-image property

The border-image property allows you to use an image or a gradient as the border of an element. You can specify a linear gradient as the border image to create a gradient border effect.

Example 1: In this example, we will set the gradient border to the element.

HTML 
<!DOCTYPE html> <html>  <head>     <title>Gradient Border</title>      <style>         .GFG {                          /* Set initial border color and width */             border: 10px solid transparent;                          /* Gradient border */             border-image: linear-gradient(to right, #f00, #00f);             border-image-slice: 1;             padding: 20px;         }     </style> </head>  <body>     <div class="GFG">         Welcome to GeeksforGeeks     </div> </body>  </html>

Output:

Gradient-color

Example 2: In this example, we will set the gradient border to the element with different border widths.

HTML 
<!DOCTYPE html> <html>  <head>     <title>Gradient Border</title>      <style>         .GFG {                          /* Set initial border color and width */             border-width: 4px 6px 8px 10px;             border-style: solid;             border-color: transparent;                          /* Gradient border */             border-image: linear-gradient(to right, #f00, #00f);             border-image-slice: 1;             padding: 20px;         }     </style> </head>  <body>     <div class="GFG">         Welcome to GeeksforGeeks     </div> </body>  </html>

Output:

Gradient-border-2


Next Article
Gradient borders in CSS

A
ashokjaiswal
Improve
Article Tags :
  • Web Technologies
  • CSS
  • CSS-Questions

Similar Reads

  • How To Make A Button Linear Gradient Color Border In Tailwind CSS?
    Creating visually appealing buttons can significantly enhance the user interface of your web application. One popular design trend is the use of linear gradient borders. In this article, we'll explore how to make a button with a linear gradient color border using Tailwind CSS. A button with a linear
    2 min read
  • How to Create Gradient Color of Progress Bar in CSS?
    Creating a gradient color progress bar can add a visually appealing element to your webpage. Gradients provide smooth transitions between colors, making the progress bar more attractive and enhancing the user experience. These are the different approaches to creating a gradient color progress bar us
    2 min read
  • How to put Gradient Colors in a website ?
    In this article, we will learn about how to put Gradient colors on a website, CSS gradients are images made by the transition between two or more colors. There are three types of gradients which are given below: Linear GradientRadial GradientConical Gradient Linear gradient: It is the type of gradie
    2 min read
  • How to define the color of the border using CSS ?
    We can give the color of the border using border or border-color properties. We need to give border-style property. Approach 1: We will give the color of the border using the border property of CSS.We will give our CSS inside the tags which are also known as an inline style.We need to give the borde
    2 min read
  • Gradient borders in CSS
    Creating visually appealing borders can significantly enhance the user experience on your website. One such technique is the use of gradient borders. Although CSS does not directly support gradient borders, there are two effective methods to achieve this: Property ValuesValueDescriptionlinear-gradie
    4 min read
  • How to Change the Border Color on Hover in CSS ?
    Border color in CSS defines the color of an element’s border. You can change the border color on hover using the :hover pseudo-class, allowing you to modify the border’s appearance when a user hovers over the element. Using CSS hover Pseudo ClassThe hover pseudo-class in CSS is a powerful tool that
    1 min read
  • CSS border-top-color Property
    border-color property is used to color all borders of the container with the same color.  border-top-color property provide option to fill different color from parent border-color to top border of the container. Note: Take care of order while writing the statement in CSS, i.e CSS will take last valu
    3 min read
  • How to Set Blur Distance in CSS?
    Blur distance means blurring the border of an element and setting its distance using CSS. In this article, we will see how to set the blur distance using CSS for styling the blur distance on the HTML element. You can use box-shadow property which adds a shadow with adjustable blur around the element
    2 min read
  • How to Set Border Width in CSS?
    The CSS border-width property is used to set the border of an element. This property allows you to specify the width of the border for all four sides of an element or individually for each side. Here, we will cover all possible approaches with detailed explanations and code examples. Table of Conten
    3 min read
  • Tailwind CSS Border Color
    This class accepts more than one value in tailwind CSS in which all the properties are covered in class form. It is the alternative to the CSS border-color property. This class is used to specify the border color of an element.  Border Color classes: border-transparent: The border color will be tran
    2 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences