Border radius issue with div

Question

I have a CSS flexbox with a div set on the HTML canvas. I want to have a border-radius around all four corners. I have tried using border-radius: 80px; but in vain. A quick fiddle is here. I want something like this. Chiseled at all the corners. But I am getting this. Please help.

It's not clear what you want but have you tried adding a border, ie `border: 1px solid black;`? If I've missed the mark, it would be good if you could show the kind of result you want — Phil, Apr 27 '20 at 04:22
You appear to already have that so again, what kind of result do you want? You might need to get out MSPaint and post some picture examples — Phil, Apr 27 '20 at 04:28
Ideally I would like to have one radius value for all corners. I don't know why it has been limited to top left corner only. — pankaj, Apr 27 '20 at 04:31
I have added images to show what I want. Guys, I am not able to set border-radius for all four corners using `border-radius:80px`. That's it. — pankaj, Apr 27 '20 at 04:38

score 3 · Accepted Answer · answered Apr 27 '20 at 04:40

Your issue is overflow: scroll;. Remove overflow: ?; property from .stage-area. With border-radius overflow: scroll; will not work together it should be hidden or inherit. Below the snippet.

.stage-area {
  width: 50%;
  background: #ffffff;
  box-shadow: 0px 24px 34px rgba(0, 0, 0, 0.25);
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;

  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 60%;
  /*overflow: scroll;*/
}

.stage-area {
  width: 50%;
  background: #ffffff;
  box-shadow: 0px 24px 34px rgba(0, 0, 0, 0.25);
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;

  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 60%;
  /*overflow: scroll;*/
}

body {
  height: 100%;
  margin: 0px;
  background-color: #ffce31;
}

.brand-icon {
  padding: 0 10% 0 10%;
}

.outer-yellow-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}

<div className="outer-yellow-area">
        <img className="brand-icon" src={brandIcon} alt="logo" />
        <div class="stage-area">
        Center stage
        <div>below stage</div>
        <div>below stage</div>
        <div>below stage</div>
        <div>below stage</div>
        <div>below stage</div>
        <div>below stage</div>
        <div>below stage</div>
        </div>
      </div>

Got it now. I knew I was messing somewhere. – pankaj Apr 27 '20 at 04:46 — pankaj, Apr 27 '20 at 04:46

score 3 · Answer 2 · answered Apr 27 '20 at 04:41

3

I have checked you fiddle, its working as you want, the only problem is you have added overflow: scroll; which is causing this problem you are facing.

Check this

overflow:scroll;

remove this.

If ned something else, feel free to share

answered Apr 27 '20 at 04:41

Atul Rajput

4,073
2
12
24

Maybe if I want overflow as well then it should be inside another div. – pankaj Apr 27 '20 at 04:45
1

Yes..But no... If you need overflow then add some padding or best solution is to have overflow auto not scroll. So if your content is more than the div size only then you will see scroll otherwise not – Atul Rajput Apr 27 '20 at 04:48

Rishab Tyagi · Answer 3 · 2020-04-27T08:10:59.547

If you want something like this: border-radius with overflow: scroll,then this is the answer.Else, please let me know.

<div className="outer-yellow-area">
    <img className="brand-icon" src={brandIcon} alt="logo" />
    <div class="stage-area">
    Center stage
    <div class="bstage">
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>

            </div>


    </div>
  </div>

and CSS

  .stage-area {
    width: 50%;
    height: 60%;
    background: #ffffff;
    box-shadow: 0px 24px 34px rgba(0, 0, 0, 0.25);
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    display: flex;
    flex-direction: column;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    border:10px solid transparent;



    }

 .bstage{
    overflow-y:scroll;
    max-height: 100px;
    }

 .bstage::-webkit-scrollbar {
    width: .8em;

    }

 .bstage::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    border-radius: 30px;



    }

 .bstage::-webkit-scrollbar-thumb {
    background-color: grey;
    border-radius:30px;
    height: 5px;


    }

  body {
    height: 100%;
    margin: 0px;
    background-color: #ffce31;
    }

 .brand-icon {
    padding: 0 10% 0 10%;
    }

 .outer-yellow-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    }

jsfiddle: https://jsfiddle.net/a14ythfg/

Well, this looks beautiful. I had applied similar scroll effects to my page. But as per the question, the trouble was with `border-radius` and it's solved — pankaj, Apr 28 '20 at 08:13
Thank You.The scroll bar was also not working inside the box.So, I have solved that too. — Rishab Tyagi, Apr 28 '20 at 08:25

Border radius issue with div

3 Answers3

Linked