border-radius style property not rounding the edges in reactjs-CodePudding

I want the edges of the div c-thumbnail__container to be rounded, but it is not working at all. Is there a way to do this?

const Thumbnail = () => {
    const [isShown, setIsShown] = useState((false));
    return (
        <>
            <div className='c-thumbnail__container' onm ouseEnter={() => setIsShown(true)} onm ouseLeave={() => setIsShown(false)}>
                <img src={example} alt="Thumbnail" />
                <Bookmark onClick={onClickBook}/>
                {isShown && (
                    <BtnPlay />
                )}
            </div>
        </>
    )
}

.c-thumbnail__container{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    
    min-width: 164px;
    min-height: 110px;
}

.c-thumbnail__container:hover{
    cursor: pointer;
    filter: brightness(.7);
}

CodePudding user response：

To add a border radius, you have to add the border-radius property to the elements CSS. It looks like you have forgotten to do that.

This CSS will fix your problem:

.c-thumbnail__container{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    
    min-width: 164px;
    min-height: 110px;

    // added:
    border-radius: 10px;
}

.c-thumbnail__container:hover{
    cursor: pointer;
    filter: brightness(.7);
}

Learn more about border-radius at https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

CodePudding user response：

Where is the border-radius? Forgotten?