How to customize the leaflet Lopup component with vue js

How an I customize the design on LPopup component of leafletjs. Following this guide from :
https://vue2-leaflet.netlify.app/components/LPopup.html#demo

Have inspected the Lpopup in the devtool, and then grab the selector call 'leaflet-popup-content-wrapper' abd then added some Css style to it ( please see the below image) but it doesnot give the border-radius: 0px. it shows inside that popup. which I don't want.

 <l-popup class="map-popup">
         <h1>{{ name.toLocaleUpperCase().substring(0, 2) }}</h1>
         <h3>{{ address }}</h3>
 </l-popup>

and my CSS:

.map-popup,
.leaflet-popup-content-wrapper {
  background: #2c3e50;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  border-radius: 0px;
}

// also tried this way, but nothing seems to work for me: 

.leaflet-popup-content-wrapper {
  background: #2c3e50;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  border-radius: 0px;
}

I want to have the below look without 'border-radius'. How can I achieve that. Any help from you is much Appreciated. Thanks in Advance!