How can give border radius to outer skin of muxPLayer @here

[tauqeer-trailfive]

Border radius is not applying im using react

const MuxVideoExample = () => { return ( <div> <h1>Simple MuxVideo Example</h1> <MuxVideo style={{ height: '100%', maxWidth: '100%' }} playbackId="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe" metadata={{ video_id: 'video-id-123456', video_title: 'Super Interesting Video', viewer_user_id: 'user-id-bc-789', }} streamType="on-demand" controls autoPlay muted /> </div> ); };

[125-alex-long]

I'm having a similar issue when trying to apply border radius. Does anyone know a soltuion?

[luwes]

It's fairly simple. Wrap the mux-player element with a div and add a CSS border-radius: 5px and overflow: hidden rule.

Have a look at this Sandbox https://codesandbox.io/p/sandbox/mux-player-rounded-corners-tlzwwv

It's also done on the Mux docs web player page https://docs.mux.com/guides/mux-player-web

[Roee-Tsur]

mux-player {
        display: block;
}

Is also needed