I have been working on tabbed content and encountered an issue with applying border radius. Despite adding style={{borderRadius: "10px"}}, it seems to have no effect. This styling works perfectly everywhere else in my project, so I am puzzled as to why it's not working for tabs specifically.
No matter where I try to implement the border radius, it simply does not show up. Is there something crucial that I might be overlooking?
Below are the tabs:
<Col md={6} xl={4} className='m-b-30' >
<Tabs defaultActiveKey="today" style={{borderRadius: "10px"}} >
<Tab eventKey="today" title="Today" >
{tabContent}
</Tab>
<Tab eventKey="week" title="Tomorrow">
{tabContent}
</Tab>
<Tab eventKey="all" title="Active Status">
{tabContent}
</Tab>
</Tabs>
</Col>
And here is the content within the tabs:
const tabContent = (
<Aux>
<div className="media friendlist-box align-items-center justify-content-center m-b-20"style={{border: "solid 1px black"}}>
<div className="m-r-10 photo-table">
<a href={DEMO.BLANK_LINK}><img className="rounded-circle" style={{width: '40px'}} src={avatar1} alt="activity-user"/></a>
</div>
<div className="media-body">
<h6 className="m-0 d-inline">Evelina Tofan</h6>
<span className="float-right d-flex align-items-center">DO <i className="fa fa-caret-down f-22 m-r-10 text-c-red"/></span>
</div>
</div>
(additional content goes here...)
</Aux>
);