Currently, I am utilizing a Popup modal component provided by the reactjs-popup library.
export default () => (
<Popup
trigger={<button className="button"> Guide </button>}
modal
nested
>
{(close: any) => (
<div className="modal">
<button className="close" onClick={close}>
×
</button>
<div className="header"> Guide </div>
<div className="content">
{' '}
<img src={img} alt="charts" className="charts" />
What is overfitting?
<br />
What is underfitting?
This example showcases the issues of underfitting and overfitting and how linear regression with polynomial features can be used to approximate nonlinear functions.
</div>
<div className="actions">
</div>
</div>
)}
</Popup>
);
Here is what it looks like: https://i.stack.imgur.com/KAu85.png
I am interested in incorporating a thick black border around the popup component. However, my current CSS isn't producing the desired effect. Any suggestions on how to achieve this?
.modal {
font-size: 12px;
border-color: black;
border-radius: 100px;
}