How to Set Border Opacity with CSS ?

Last Updated : 07 May, 2023

The opacity element in CSS lets us make an element semi-transparent. Although this property does not allow us to adjust the transparency of a border, we can get a similar effect by utilizing an RGBA color value in conjunction with the border property. In this article, we’ll see how to set border opacity with CSS.

RGBA (Red, Green, Blue, and Alpha) is a color model that is used in computer graphics, where each color is represented by a value between 0 and 255 and the alpha value is a float value between 0 and 1, indicating how transparent the color is. Black is represented by the RGBA values (0, 0, 0, 1), where the final digit denotes complete opacity. (255, 0, 0, 0.5), where the final number denotes 50% transparency and is used to represent the color red with 50% transparency.

CSS Properties:

border: The attributes are used to define the border style, color, and size of an element.
border-radius: The CSS attribute rounds the outside border edge of an element. You can build circular corners with a single radius or elliptical corners with two radii.
box-shadow: The CSS feature creates shadow effects around the frame of an element. Several effects, separated by commas, can be set. A box shadow is defined by its X and Y offsets, blur and spread radius, and color.

Syntax:

border

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

box-shadow

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

Example 1: In the following example, we’re creating a simple HTML div element with a class name called “card” and adding a heading and paragraph. Then in the CSS code, we are setting the border to 1 pixel wide, solid, and have a color black with an alpha (opacity) value of 0.5. We’re also adding background color and border radius and a box shadow to make the 3D effect. lastly, we are giving some padding.

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: This one is the same as the previous example but the difference is that in this example, we are giving two RGBA colors on the border top.

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"> 
    <title>GeeksforGeeks</title> 
    <style> 
        .box { 
            border: 3px solid green; 
            border-top: 4px solid rgb(60, 146, 60); 
            border-top: 5px solid rgb(227, 120, 142); 
            box-shadow: 4px 2px 10px rgba(0, 0, 0, 0.2); 
            border-radius: 10px; 
            padding: 20px; 
        } 
    </style> 
</head> 
  
<body> 
  
    <div class="box"> 
        <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>