# 
##  
In [CSS](https://www.educative.io/answers/what-is-css), the opacity property allows us to make an element semi-transparent. Although we cannot use this property to change the transparency of a border, we can achieve a similar effect by using an RGBA color value with the `border` property.

<!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>Example</title>
</head>
<body>
  <div>
    <p>Hello! I am a paragraph contained within a div. My parent div has a semi-transparent red border.</p>
  </div>
</body>
</html>

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  display: flex;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  width: 300px;
  height: 200px;
  border: 10px solid rgba(255, 0, 0, 0.5); // This is how we specify the border color and transparency level.
}

p {
  padding: 20px;
}

codemirror

How to set border opacity in CSS

Use the RGBA color model's alpha channel to adjust the border's transparency in CSS.

How to set border opacity in CSS

Syntax

Example