<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
div {
padding: 10px;
border: 1px solid rgba(255, 0, 0);
border-top: 1px solid rgba(255, 0, 0, .3);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* Firefox 4+, Opera, Chrome */
}
</style>
</head>
<body>
<h2>Example</h2>
<div>Set a border opacity with CSS</div>
</body>
</html>