How to Set Border Width in CSS?

How to set gradient border color in CSS?

Last Updated : 17 Apr, 2024

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

How to Set Border Width in CSS?

A

ashokjaiswal

Improve

Article Tags :

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

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

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

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

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: Try It: .custom-item { border: 1px solid gra

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

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

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

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

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