Seeking to create a text box with a sleek line on the left side for design flair. The challenge arises when attempting to match the thickness of the line with the border radius of 10px. After various unsuccessful attempts, here is the current solution:
div {
position: relative;
width: 400px;
height: 200px;
background-color: rgba(0, 255, 50, 0.3);
border-radius: 10px;
}
div::before {
content: "";
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
width: 5px;
height: calc(100% - 3px);
background-color: rgba(0, 150, 0, 0.5);
border-radius: 5px 0 0 5px / 10px 0 0 10px;
}
p {
position: absolute;
top: 40%;
left: 35%;
}<div>
<p>Make me beautiful!</p>
</div>Is there a way to successfully achieve this relationship between line thickness and border radius?
Edit: Utilizing the same variable for background color unity between the line and box, followed by applying a filter to darken the line.