There seems to be an issue with the border-radius property on modal divs in my project. When I apply the property, only one or two corners of the div round while the other corners remain unchanged.
For a visual reference, please check out this image linked here. Note the top left corner in the image: https://raw.githubusercontent.com/Randall-Coding/misc/master/border_round_err.png
I've experimented with various cross-browser attributes for border rounding, including:
-moz-border-radius: 20px; /* Also tried 20px 20px */
-webkit-border-radius: 20px;
-o-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
Below is the CSS code I used with a mixin (keep in mind that the issue persists with or without the mixin):
div.contact_window{
background-color: white;
-moz-border-radius: 20px; /* Also tried 20px 20px */
-webkit-border-radius: 20px;
-o-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
border: 3px solid black;
position:absolute;
width: 60%;
min-width:700px;
max-width:800px;
height: 520px;
overflow:scroll;
left:20%;
top: 130px;
z-index:10;
display: none;
display: block; /*DEBUG */
}
div.mask{
background-color: black;
opacity: 0.6;
position:fixed;
height:100%;
width: 100%;
z-index: 1;
top: 0px;
left: 0px;
display:none;
display:block; /*DEBUG */
}
The HTML code used is as follows:
<div class="contact_window" id='#contact_window'>
<%= render 'contact' %>
</div> <!-- end div.contact_form -->
<div class="mask">
I am able to round the corners of other divs without any issue, so I'm confused as to why this problem is occurring specifically with the modal divs in this project.
If anyone has encountered a similar issue or has insights into what might be causing this problem, I would greatly appreciate the help.
*I am using Firefox and have also verified the issue on my Chromium browser. My current operating system is Ubuntu Linux 18.04.
*Here are the links to the SCSS and HTML files for reference:
HTML https://github.com/Randall-Coding/misc/raw/master/index.html
CSS (SCSS) https://github.com/Randall-Coding/misc/raw/master/main.scss
edit* Upon inspecting the element, it still shows border-radius:20px