CODEWITHSUNDEEP
htmlcsssass
David Gomes
David Gomes

Reputation: 5835

Add rounded corner to a group of divs

I have a simple horizontal div with a few colored children:

.bar {
  display: flex;
  height: 90px;
  
  border-radius: 20px;  
}
<div class="bar">
  <div class="segment" style="width: 150px; background: red;"></div>
  <div class="segment" style="width: 100px; background: blue;"></div>
  <div class="segment" style="width: 5px; background: green;"></div>
</div>

I want to try make the .bar div have rounded corners but can't see an obvious way to do it. I know this way:

.segment {
    &.first-child {
        border-top-left-radius: 25px;
        border-bottom-left-radius: 25px;
    }

    &.last-child {
        border-top-right-radius: 25px;
        border-bottom-right-radius: 25px;
    }
}

But that doesn't work if one of the .segment's is too small, as is the case in my snippet.

Upvotes: 1

Views: 288

Answers (1)

Pete
Pete

Reputation: 58462

Why not put border radius on bar and hide the overflow:

.bar {
  display: inline-flex;  /* make inline so it is only as wide as children */
  height: 90px;
  
  border-radius: 25px;  
  overflow: hidden;   /* add this */
}
<div class="bar">
  <div class="segment" style="width: 150px; background: red;"></div>
  <div class="segment" style="width: 100px; background: blue;"></div>
  <div class="segment" style="width: 5px; background: green;"></div>
</div>

Upvotes: 3

Related Questions