The border-radius property in CSS selectively rounds only one corner of the modal div window

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

Answer №1

Have you attempted achieving the rounding effect without using the mixin by directly passing the border radius?

Unless you have specific requirements for individual corner radii, it is recommended to simply pass a single value to the border-radius property that will be applied to all corners. For example:

border-radius: 20px;

instead of:

border-radius: 20px 20px;

You can create a clearer mixin like this:

@mixin border-radius($radius) {
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

and then simply pass one value like this:

@include border-radius(20px);

Answer №2

After carefully analyzing each attribute, it became clear that the problem lies in the specific setting

overflow:scroll

This setting causes the window to display sharp corners where the scrollbars should appear.

The solution is to eliminate overflow:scroll from the CSS style.

Answer №3

Experiment with using border-radius in percentage values, for example:

border-radius:100%;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve Images from URL - Similar to Facebook Thumbnails

I am in the process of creating a website similar to "Reddit." Users will have the option to share URLs, and I would like to use PHP to extract the correct image from these links. What I'm looking for is a more advanced script that can retrieve imag ...

Do the Push Notification APIs in Chrome and Firefox OS follow the same set of guidelines and standards?

Do Chrome and Firefox OS both use Push Notifications APIs that adhere to the same standard? If not, is either one moving towards standardization? ...

The element fails to appear on screen when using Firefox

Check out this site using IE or Chrome and pay attention to the yellow block: Then, try opening the same page in Firefox and watch as the block mysteriously vanishes. Does anyone have any idea why this is happening? Did I make a mistake somewhere? ...

Unresolved Issue: Jquery Modal Fails to Activate on Subsequent Click for Ajax-

When I make an Ajax call, I load HTML into a div. This HTML content contains a jQuery modal that opens when clicked. However, on the first click, the modal opens correctly. On subsequent clicks, I receive the following error in the console: Uncaught Type ...

Display a Popup at 5PM without the need for a page refresh, updating in real-time

After searching extensively online, I was unable to find a suitable solution for my issue. What I am aiming for is to have a popup appear on my page every day at 5:00 PM without the need to refresh the page. If I happen to access the page before 5:00 PM an ...

The dividers flicker in and out of view

I have a menu with 7 elements, where clicking on an element causes its content to appear by fading in. If another element is clicked, the current content fades out and the new content fades in. I've successfully implemented this concept for 3 of the 7 ...

How can you make a dynamic 360 image that responds to mouse movements using three.js?

Is it possible to achieve a three.js effect similar to the one shown here? We have come across solutions that involve drag&drop for camera angle control, but we are interested in having the mouse position dictate where the camera points. For instance, ...

Adjusting image width using jQuery

I have been experimenting with creating a Webgl hover effect for an image. The effect works well, but now I am trying to specify a width for the image within jQuery. new hoverEffect({ parent: document.querySelector('.ticket'), intensity1: 0. ...

The alignment of the list is off when using Flexbox on smaller screens

When my flexbox shifts into a column layout at 600 pixels, the list in the second box loses its center alignment on smaller screens. Despite trying various margin and padding adjustments within and outside of media queries, the content remains too far to t ...

the content outside of the division is incorrectly formatted

Here is the code snippet that I am working with: <html lang='es'> <head> <link rel="stylesheet" type="text/css" href="theme.css"> <link rel="stylesheet" type="text/css" href="bootstrap337/css/bootstrap.mi ...

Are you able to design a webpage with the following table layout:

Click here to see the design Assign a letter to each table cell and provide all dimensions in pixels. The assigned letters and dimensions should not be visible on the final web page. Make sure the external border of the table is 4 pixels wide, and interna ...

Is there a method to construct this? It appears quite challenging to create the intricate lines

I want to achieve this specific layout, but I am unsure how to align the lines next to the boxes. Should I use display or position properties to accomplish this? Image illustrating my desired outcome ...

Concealing the view-source feature in core PHP or HTML

Is there a way to conceal view-source in basic php or html? I've come across some information on this topic, but I'm having trouble grasping how to implement it: Web Developer Class: How to Hide your Source Code ...

Learn how to display HTML content in trNgGrid using the $sce.trustAsHtml method

I am currently working with a table that has search options implemented using trNgGrid.js. The data for this table comes from a Sharepoint list where one of the columns contains HTML content that I need to display. To achieve this, I attempted using $sce. ...

Unleash the Power of Animating Your Active Tabs

Is there a way to create animated tabs that slide in when clicked? I've experimented with using transition code but haven't quite achieved the desired effect yet. This is what I currently have: [data-tab-info] { display: non ...

What is the best way to make a table fill 100% of the available height

Is this a Repetitive Question? How to stretch an HTML table to 100% of the browser window height? Just like the title says, I am looking for a way to make my table element stretch to 100% height even when the content does not entirely fill the page&ap ...

Struggling with the transition of a CSS navigation menu from hover to focus

I'm attempting to transition a "mega menu" from 'hover' to 'focus'. My goal is to have the dropdown menus appear "on click" and remain visible until another top-level selection is clicked. Ideally, I am looking for a CSS-only solut ...

Adjust the placement of the fixed header waypoint or change its offset

Currently working on developing a Wordpress site with the Avada theme, my goal is to have a sticky header that starts immediately at the top of the page. This is the website in progress: The site I'm trying to emulate is synergymaids.com. If you vi ...

Utilizing Angular and the Kendo UI framework to customize the dimensions of a Kendo window

Is there a way to dynamically set the height and width of the kendo window based on the content of the kendo grid? Below is the code snippet for my kendo-window: <div kendo-window="Operation.OperCustWind" k-width="800" k-height="700" ...

Showcasing top performers via JavaScript tabs

I have two tabs on my webpage: "Overall Leaderboard" and "Weekly Leaderboard". Each tab displays a leaderboard with different scores. When I click on the "Overall Leaderboard" tab, it shows a leaderboard with specific scores. Now, my question is how can ...