Border radius on parent div

Question

There are three divs that are inside the parent div with display:flex.

I want to create a border-radius for parent div but something doesn't work.

My code is:

<div style="height:50px;display:flex;width:500px;border-radius: 20px;">
  <div style="height:50px;width:30%;background:red"></div>
  <div style="height:50px;width:30%;background:blue"></div>
  <div style="height:50px;width:40%;background:yellow"></div>
</div>

The border-radius is invisible. It is possible for the child to have width:0% or width:100% so the border-radius should be applied for the parent container.

How is it possible to to that?

Does this answer your question? [Forcing child to obey parent's curved borders in CSS](https://stackoverflow.com/questions/3714862/forcing-child-to-obey-parents-curved-borders-in-css) — ATP, Apr 15 '21 at 21:05
Does this answer your question? [CSS3 Border Radius Not Working for div element](https://stackoverflow.com/questions/49592610/css3-border-radius-not-working-for-div-element) — disinfor, Apr 15 '21 at 21:45

score 9 · Answer 1 · edited Apr 15 '21 at 22:03

9

add overflow:hidden to parent div

<div style="height:50px;display:flex;width:500px;border-radius: 20px;overflow:hidden">
  <div style="height:50px;width:30%;background:red"></div>
  <div style="height:50px;width:30%;background:blue"></div>
  <div style="height:50px;width:40%;background:yellow"></div>
</div>

edited Apr 15 '21 at 22:03

tacoshy

10,642
5
17
34

answered Apr 15 '21 at 20:54

Daniel Resch

584
3
12

down-voted for following reasons: Missing content. Even though your anwser would solve the OP`s issue, this anwser could incl. more content and formatting. It should at least contain a working snippet as the other anwser or be given as an upvote to the identical comment that was given before. – tacoshy Apr 15 '21 at 21:44
even then more content could have been used and espacially a workign snippet for validation. An 1 sentence anwser in most cases is not helpful as an anwser and would have been sufficient as a comment. – tacoshy Apr 15 '21 at 21:50
it is still the correct answer though @tacoshy – Daniel Resch Apr 15 '21 at 21:51
@tacoshy Ok I edited my question. but you need to ask you the following: what is more important to you? a correct answer, or correct formatting? – Daniel Resch Apr 15 '21 at 22:01
they are both important. Its not a question of what is more important. It takes literally 5 seconds to add a code snippet for validation (which btw. I added for you). It also literally takes 1 second to highlight code lines instead of posting them unformatted. You could write an article without any punction or formatting. The article could contain true information, however you would surely agree that the article would be hard to read, if not being unreadable. As such it would be low-quality no matter if the content is true or not. – tacoshy Apr 15 '21 at 22:06
I disagree, the correct answer is the most important thing - especially if the task is very simple!, I of course post more complex answers in code formatting, but for something like this which is only one line? I dont't understand this. – Daniel Resch Apr 15 '21 at 22:09
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/231186/discussion-between-daniel-resch-and-tacoshy). – Daniel Resch Apr 15 '21 at 22:44

score 0 · Answer 2 · answered Apr 15 '21 at 22:06

Just gotta add overflow: hidden to the parent div OR apply the border-radius to the first and last children. Sometimes, certain elements don't react nicely to the parent clipping them and respond better to being clipped directly. Here are both methods:

Border-radius on parent:

body > div {
  border-radius: 20px;
  overflow: hidden;
}

<div style="height:50px;display:flex;width:500px;">
  <div style="height:50px;width:30%;background:red"></div>
  <div style="height:50px;width:30%;background:blue"></div>
  <div style="height:50px;width:40%;background:yellow"></div>
</div>

Border-radius on children:

body > div > div:first-child {
  border-radius: 20px 0 0 20px;
}
body > div > div:last-child {
  border-radius: 0 20px 20px 0;
}

<div style="height:50px;display:flex;width:500px;">
  <div style="height:50px;width:30%;background:red"></div>
  <div style="height:50px;width:30%;background:blue"></div>
  <div style="height:50px;width:40%;background:yellow"></div>
</div>

score -1 · Answer 3 · edited Apr 15 '21 at 21:40

-1

Try this:

<div style="height:50px;display:flex;width:500px;border-radius: 20px;overflow: hidden">
  <div style="height:50px;width:30%;background:red"></div>
  <div style="height:50px;width:30%;background:blue"></div>
  <div style="height:50px;width:40%;background:yellow"></div>
</div>

so adding overflow: hidden to the parent should fix the problem

edited Apr 15 '21 at 21:40

tacoshy

10,642
5
17
34

answered Apr 15 '21 at 21:07

Sowam

1,674
3
12
30

Border radius on parent div

3 Answers3