CODEWITHSUNDEEP
htmlcssreactjsoverflowborder-radius
PeavyPea
PeavyPea

Reputation: 15

BorderRadius showing different background color

I'm trying to create a box in the center using div's in react. The border radius is working but the corners are a different color than the background. I've tried using overflow: hidden but it's not doing anything.

Code:

import React from 'react';
import { Paper, Box } from "@mui/material"

import '../styling/Results.css';

function Results() {
  

  return (
    <div className="container">
      
      <div className='wrapper'>
        <Paper elevation={10}>

          <div className="Box">

            <div className="Items">
              <h1> Results </h1>
            </div>
          
          </div>

        </Paper>
      </div>

    </div>
  );
}

export default Results;

CSS:

.wrapper{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: beige;

}

.Box {
    height: 400px;
    width: 500px;
    background: black;
    color: white;
    display: flex;
    border-radius: 30px;
    overflow: hidden;
}

Heres what it looks like: Screenshot

Upvotes: 0

Views: 494

Answers (2)

Morteza Mazrae
Morteza Mazrae

Reputation: 52

  return (
    <div className="container">
      <div className="wrapper">
        <Paper
          style={{ boxShadow: "none", background: "transparent" }}
          elevation={10}
        >
          <div className="Box">
            <div className="Items">
              <h1> Results </h1>
            </div>
          </div>
        </Paper>
      </div>
    </div>
  );

Upvotes: 0

PeavyPea
PeavyPea

Reputation: 15

I got it. The problem was with the Paper borderRadius. To fix this, I just changed the borderRadius of the Paper to match with my div like so:

<Paper sx={{borderRadius:"30px"}} elevation={10}></Paper>

Upvotes: 1

Related Questions