Skip to content

unable to add a border to popup modal

I am using a Popup modal component from the reactjs-popup library.

export default () => (
    trigger={<button className="button"> Guide </button>}
    {(close: any) => (
      <div className="modal">
        <button className="close" onClick={close}>
        <div className="header"> Guide </div>
        <div className="content">
          {' '}
          <img src={img} alt="charts" className="charts" />
          What is overfitting?
          <br />
          What is underfitting?
          This example demonstrates the problems of underfitting and overfitting and how we can use linear regression with polynomial features to approximate nonlinear functions.
        <div className="actions">

This is how it looks like: enter image description here

I want to add a thick black border to the popup component. How can I do so? My current css doesnt seem to work.

.modal {
    font-size: 12px;
    border-color: black;
    border-radius: 100px;



You need to set border-style: solid; the default is none. (maybe border-width too)