CODEWITHSUNDEEP
javascripthtmlcssreactjs
Aadhit Shanmugam
Aadhit Shanmugam

Reputation: 519

How to mask line border with parent corner radius in CSS?

I'm using next js for my web application, and I have come to this requirement I need. Please refer the below image:

enter image description here

The line is a progress bar which is a child of the parent div in the background. I want to be able to hide the start of the line behind its corresponding parent div.

Here is an example code for reference:

.parent-div{
display:flex;
flex-direction: column;
justify-content: center;
width: 320px;
height: 48px;
border-radius: 17px;
max-height: 48px;
}

.progress-bar{
height: 5px;
margin-top: 3px;
width: inherit;
border-radius: 17px;
background-color: #6d45fc;

}
<html>
    <div class="parent-div">
        <div class="progress-bar"></div>
    </div>
</html>

How do i mask the line into the parent div

This is the expected output:

enter image description here

Upvotes: 0

Views: 1144

Answers (1)

Vladislav Akhmetvaliyev
Vladislav Akhmetvaliyev

Reputation: 755

Just add the overflow: hidden property to parent

.parent-div{
position: relative;
display:flex;
flex-direction: column;
justify-content: center;
width: 320px;
height: 48px;
border-radius: 17px;
max-height: 48px;
background-color: gray;
overflow: hidden;
}

.progress-bar{
position: absolute;
bottom: 0;
height: 5px;
margin-top: 3px;
width: inherit;
border-radius: 17px;
background-color: #6d45fc;

}
<html>
    <div class="parent-div">
        <div class="progress-bar"></div>
    </div>
</html>

Upvotes: 2

Related Questions