How set the shadow color of div using CSS ?

How to define the color of the border using CSS ?

Last Updated : 30 May, 2023

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 border-style property to solid, dashed, double, hidden, ...etc.

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html>
<body>
    <h1 style="border: rgb(195, 255, 0);
            border-style: solid;">
        Java GFG
    </h1>
    <h2 style="border: rgb(0, 140, 255);
            border-style: solid;">
        C++ GFG
    </h2>
</body>
</html>

Output :

Approach 2:

In this example, we will use the CSS border-color property inside the style tag of the head section. It is also known as internal or embedded CSS.
If you give two colors in the border-color property then the first color will be for top/bottom and the second color will be for left-right.
If you give 4 colors then the first will be top, the second will be right, and third, fourth will be bottom, left (top, right, bottom, left).

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        h3 {
            border-color: rgb(0, 255, 76);
            border-style: dashed;
        }

        h2 {
            /* top->red right->blue bottom->green left->orange */
            border-color: red blue green orange;
            border-style: solid;
        }

        h1 {
            /* top/bottom ->red  left/right->blue */
            border-color: red blue;
            border-style: solid;
        }
    </style>
</head>

<body>
    <h1>Java GFG</h1>
    <h2>C++ GFG</h2>
    <h3>Python GFG</h3>
</body>
</html>

Output :

border-color CSS

How set the shadow color of div using CSS ?

R

rajatagrawal5

Improve

Article Tags :

Similar Reads

How to Change the Background Color of Table using CSS?

Changing the background color of a table using CSS can help improve the visual appearance of a website or web application. we will learn how to change the background color of the table using CSS with different approaches.These are the following approaches:Table of Content Using Inline CSSUsing Inter

How set the shadow color of div using CSS ?

In this article, we will see how to set the shadow color of the div using CSS. Like humans have their shadows we can use CSS to make any color of shadow to the div element. Box shadow property: This property is used to create one or more than one shadow of an element. Syntax: box-shadow: h-offset v-

How to set gradient border color in CSS?

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 propertyThe bor

How to specify the double border using CSS ?

The task is to specify the double border using CSS. In this article, we are going to use the border-style property to style the border. we have two common methods border-style property style and outline property in CSS. Property used: border-style property: This property is used to set the style of

How to create a hidden border using CSS properties ?

In this article, we will learn how to create a hidden border using CSS properties. In the following examples, both inline styling and style definition is used in the head section to define the hidden border. Approach: We will use two headings in which one will show the border color and the other wil

How to set the width of the bottom border in CSS ?

In this article we will learn about how to set the width of the bottom border in CSS, We can set the width of the bottom border using the border-bottom-width CSS property. We can give the size in pixels and also can give predefined values such as thick, thin...etc. Approach 1: We will use inline CSS

How to add border in the clip-path: polygon() using CSS ?

Adding a border around shapes can substantially improve the visual attractiveness of your website when it comes to web design. Using the clip-path: polygon() Property is one great and inventive approach to accomplish this. This not only allows you to make unusual shapes but also allows you to add a

How to define the border bottom color is animatable in CSS ?

In this article, we will learn How to define the border-bottom-color is animatable in CSS. Animating the border-bottom-color of an element helps draw attention to it and make it more visually interesting. Approach: The border-bottom-color is the color of the bottom border, and we want to animate its

How to set the shape of top-left corner of div using CSS ?

In this article, we will learn How to set the shape of the top-left corner of a div using CSS. The border-top-left-radius property is used to form the shape of the top-left corner. We can use percentages to shape the top-left corner, for that, you can check this article How to set the shape of the t

How to set the width of the bottom border animatable using CSS ?

In this article, we will learn to set the width of the border-bottom animate using CSS. Approach: The border-bottom-width is the width of the bottom border, and we want to animate its width. We will use the animation property of the CSS. It takes three values The first is the name of the animation w