CODEWITHSUNDEEP
css
pankaj
pankaj

Reputation: 530

Border radius issue with div

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. enter image description here But I am getting this.enter image description here Please help.

Upvotes: 2

Views: 2244

Answers (3)

Rishab Tyagi
Rishab Tyagi

Reputation: 926

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

enter image description here

<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/

Upvotes: 1

Atul Rajput
Atul Rajput

Reputation: 4178

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

Upvotes: 3

Rahul
Rahul

Reputation: 2071

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;*/
}

enter image description here

.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>

Upvotes: 3

Related Questions