How to Set Border Opacity with CSS ?

Last Updated : 17 Oct, 2024

Border opacity in CSS controls the transparency of an element’s border. While there's no direct property for border opacity, you can achieve it by using color functions like rgba() or hsla(), which allow you to specify the opacity of the border color.

Syntax

border

border: 1px solid rgba(255, 0, 0, 0.5);

box-shadow

box-shadow: [distance] [direction] [blur radius] [spread radius] [color];

Examples to Setting Border Opacity by using CSS

Example 1: Here we creates a styled card with a 3px solid border, rounded corners, a shadow effect, and padding. It contains a heading and a paragraph to display content in a clean format.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
    <style>
        .card {
            border: 3px #00000099 solid;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.3);
            padding: 20px;
        }
    </style>
</head>

<body>
    <div class="card">
        <h2 style="color:green;">
            Welcome To Geeksforgeeks!!
        </h2>
        <p>
            A computer Science portal for geeks.
            It contaisnthe well written, well thought
            & well explained computer science &
            programming articles.
        </p>
    </div>
</body>

</html>

Output:

Example 2: Here we creates a card with a 3px semi-transparent border, rounded corners, shadow, and padding. It contains a green heading and a paragraph describing GeeksforGeeks as a computer science portal.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, 
                   initial-scale=1.0">
    <style>
        .card {
            border: 3px #00000099 solid;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.3);
            padding: 20px;
        }
    </style>
</head>

<body>
    <div class="card">
        <h2 style="color:green;">
            Welcome To Geeksforgeeks!!
        </h2>
        <p>
            A computer Science portal for geeks.
            It contaisnthe well written, well thought
            & well explained computer science &
            programming articles.
        </p>
    </div>
</body>

</html>