I want to have a text box with a line on the left side for design purpouses. The box has a border radius oh 10px. The problem is that the line is too thick if I make it 10px wide. So I made it 5px and tried to adjust the horizontal and vertical radiuses separately to make it match the border of the box. I have tried for ages and I just cant get it right. Here’s my best attempt:
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 it even possible to make this work and how?
Edit: I’m using the same variable for the background color of the line and the box. Then I’m applying a filter to the line to make it darker.
>Solution :
If it’s only for decoration, use a gradient:
div {
position: relative;
width: 400px;
height: 200px;
background:
linear-gradient(rgba(0, 150, 0, 0.5) 0 0) /* color */
left / 5px 100% no-repeat, /* position / width height */
rgba(0, 255, 50, 0.3);
border-radius: 10px;
}
p {
position: absolute;
top: 40%;
left: 35%;
}<div>
<p>Make me beautiful!</p>
</div>