CODEWITHSUNDEEP
htmlcss
Dprvd
Dprvd

Reputation: 21

background color overflow out of border radius

I was trying to make the border-radius: 20px; but I don't know why the background color overflowed out of the border. Please help me how to solve this one.

Here is the sample codes. Thank you.

.bar{
    padding: 20px;
}

.barContainer{
    width: 50%;
    background-color: #cccccc;
    border: 1px solid #111;
    border-radius: 20px
}

.per {
    text-align: right;
    padding: 10px 0;
    color: #111;
    
}

.html {width: 90%; background-color: #f44336;}
.css {width: 80%; background-color: #2196F3;}
.js {width: 65%; background-color: #FEF70F;}
.java {width: 60%; background-color: #808080;}
.php {width: 60%; background-color: #008631;}

                  <div class="bar">
                    <div class="topic">HTML</div>
                    <div class="barContainer">
                        <div class="per html">90%</div>
                    </div>
                    <div class="topic">CSS</div>
                    <div class="barContainer">
                        <div class="per css">80%</div>
                    </div>
                    <div class="topic">JavaScript</div>
                    <div class="barContainer">
                        <div class="per js">50%</div>
                    </div>
                    <div class="topic">Java</div>
                    <div class="barContainer">              
                        <div class="per java">50%</div>
                    </div>
                    <div class="topic">PHP and MySQL</div>
                    <div class="barContainer">
                        <div class="per php">50%</div>
                    </div>                
                </div>

here is the image

Upvotes: 0

Views: 66

Answers (2)

eJeeban Web Design Company
eJeeban Web Design Company

Reputation: 26

Try add in overflow: hidden in barContainer:

.barContainer{
    width: 50%;
    background-color: #cccccc;
    border: 1px solid #111;
    border-radius: 20px;
    overflow: hidden;
}

Upvotes: 0

Tom
Tom

Reputation: 5677

Add overflow: hidden to the .barContainer rule :

.bar{
    padding: 20px;
}

.barContainer{
    width: 50%;
    background-color: #cccccc;
    border: 1px solid #111;
    border-radius: 20px;
    overflow: hidden;
}

.per {
    text-align: right;
    padding: 10px 0;
    color: #111;
    
}

.html {width: 90%; background-color: #f44336;}
.css {width: 80%; background-color: #2196F3;}
.js {width: 65%; background-color: #FEF70F;}
.java {width: 60%; background-color: #808080;}
.php {width: 60%; background-color: #008631;}
 <div class="bar">
    <div class="topic">HTML</div>
    <div class="barContainer">
        <div class="per html">90%</div>
    </div>
    <div class="topic">CSS</div>
    <div class="barContainer">
        <div class="per css">80%</div>
    </div>
    <div class="topic">JavaScript</div>
    <div class="barContainer">
        <div class="per js">50%</div>
    </div>
    <div class="topic">Java</div>
    <div class="barContainer">              
        <div class="per java">50%</div>
    </div>
    <div class="topic">PHP and MySQL</div>
    <div class="barContainer">
        <div class="per php">50%</div>
    </div>                
</div>

Upvotes: 1

Related Questions