Creating rounded corners in Firefox can result in a gap between the border and the background

I'm trying to round the corners of a div, but in Firefox there seems to be an issue with whitespace between the border and background color.

Check out my demo fiddle.

<div>&nbsp;</div>

div {
    margin: 20px;
    width: 250px;
    height: 250px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    border-radius: 15px;
    background-color: #4c66a1;
    border: 2px solid #4c66a1;
}

The issue only occurs in Firefox, while IE, Chrome, and Opera display the rounded corners correctly. The slight whitespace gap looks like a lighting effect on the corner edges.

Is this a known bug in Firefox when applying rounded corners? Any workarounds?

Note: For demonstration purposes, I've intentionally made the border and background color the same to highlight the issue more clearly.

 Firefox      Chrome/IE/Opera

        

htmlfirefoxcss

Answer №1

Surprisingly, switching to a dotted border makes the white disappear:

div {
    margin: 20px;
    width: 250px;
    height: 250px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    -khtml-border-radius: 30px;
    border-radius: 30px;
    background-color: #4c66a1;
    border: 2px dotted #4c66a1;
}

http://jsfiddle.net/5yAkZ/23/

UPDATE previously had incorrect css code

Answer №2

For details on the resolution, please visit this link. This issue has been resolved in Firefox 11 and later versions.

Answer №3

Take a look at this if it interests you JsFiddle

<div id='ex1' class='exampleRound'>&nbsp;</div>

#ex1{
    border-radius: 50px;
    height: 200px;
    width: 200px;
}
.exampleRound {
    background: none repeat scroll 0 0 #4c66a1;
    border: 5px solid pink;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 30px;
    padding: 20px 40px;
    margin:20px
}

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

Achieve full width for container using flexbox styling

In an attempt to develop a category dropdown menu with multiple columns based on the length of the <ul>, I am facing some challenges. For reference, you can view the fiddle that I have created here. The goal is to arrange each submenu item below th ...

htmlcssflexbox

Styling the React Material UI DataGrid with the MuiDataGrid-window class using createMuiTheme or makeStyles / styled-components

I've been putting in a lot of effort to customize the css for the .MuiDataGrid-window in MaterialUi's DataGrid. I've been referencing css rules from https://material-ui.com/api/data-grid/ I managed to get it working within createMuiTheme fo ...

cssreactjsdatagridmaterial-uimui-datatable

The collapsible list feature that includes the use of plus and minus signs is malfunctioning

Below is the script that I wrote to address this issue, but for some reason the + and - swapping is not functioning correctly. $('.showCheckbox').click(function(e) { var dynamicBox = $(this).attr('val'); var collapseSign = $(th ...

javascriptjqueryhtml

Problem with z-index in VueJS: Child div z-index not functioning within v-dialog

I am facing an issue where I have brought a span to display a loading image inside the v-Dialog of a vuejs screen. The problem is that the v-dialog has a z-index of 220 set as inline style, causing my new span (loading image) to appear below the v-dialog. ...

jquerycssvue.jsz-index

Utilizing Laravel 5.2 to showcase a video

I am currently developing in Laravel 5.2 and facing an issue with displaying a video on my view page. While I can successfully store the video in my database table, I am encountering difficulties when trying to fetch and display it. In my database table, I ...

phphtmltwitter-bootstrap-3laravel-5

Ways to modify the appearance of the button within ion-calendar

Looking to customize the styling of ion-calendar classes Attempting to add styles to the ion-calendar-month class, but not seeing any changes take effect. ...

javascriptcssangularionic5

What is preventing me from directly taking from Codepen?

Looking to experiment with a different landing page? Take inspiration from this example. Here's the HTML snippet, for more details check out the full code on Codepen. <link href='http://fonts.googleapis.com/css?family=Lobster' rel=&apos ...

csshtmlopen-sourcesublimetext2

Leverage the model attribute in a Spring controller to conditionally display elements using

I am currently working with spring boot, angularjs and using html as the view. This setup is being implemented in index.html. <a ng-show="permission=='write'"> By returning the 'permission' value in the model from the spring boo ...

htmlangularjsspring

Is there a way to connect CSS files from a different directory?

I'm currently in the process of developing a website and I encountered an issue with linking my CSS file, which is stored in a different folder. I originally had it in the same directory as my HTML code, but now I need to figure out how to link it pro ...

htmlcss

The functionality of the onclick and onserverclick attributes seem to be malfunctioning when

I am in the process of creating a basic login screen using the code provided below: <form id="login"> <div class="formHeader"> <h1>Login</h1> </div> <div class="formDiv"> <input type="text" placeholder="Email" na ...

c#htmlasp.net

How to properly store response text in JavaScript variable?

Utilizing Ajax to execute a PHP script on my website, I aim to assign the response from the PHP script to a JS variable. The objective is for this script to set the variable "stopAt" to 42. This is where I encountered an issue: Below is the code snippet ...

javascriptphphtmlajax

What is the best way to align background shapes within a specific section on a webpage using CSS?

I've been attempting to strategically place multiple shapes in the background using CSS, but I'm facing challenges. While I was successful with my hero section at the top of the page, positioning elements in a section halfway down has proven prob ...

htmlcss

Manipulate images in real-time and insert custom text using JavaScript/jQuery

Within my possession is an image depicted above. My objective revolves around dynamically altering the values present at the occurrences of L, A, and B; to achieve this, I must eliminate or conceal L, A, and B while substituting them with numerical equiv ...

javascriptjqueryhtmldynamic-textdynamic-image-generation

Tips for creating a dynamic sidebar animation

I have recently delved into the world of web design and am eager to incorporate a sidebar into my project. While browsing through w3school, I came across a design that caught my eye, but I found myself struggling to grasp certain concepts like the 'a& ...

javascripthtmljquerycsssidebar

Angular Universal causes SASS imports to malfunction

Check out this sample app that you can download to see the issue in action: https://github.com/chrillewoodz/ng-boilerplate/tree/universal I am currently working on implementing angular universal, but I'm encountering an error with a SCSS import in o ...

cssangularsassangular-universal

The event listener function is not functioning properly on images generated by JavaScript

I'm currently working on placing multiple images on a grid in the center of the page and would like to include a function that triggers when each individual image is clicked. The images are dynamically created using JavaScript and inserted into the do ...

javascripthtmlcss

How to iterate through a "for" loop in JavaScript using Python-Selenium?

In my current project, I am utilizing Javascript to gather data from an HTML page using Selenium. However, I am facing a challenge where I am unable to execute the multi-line for loop in the Javascript portion on my computer through Selenium with Python (S ...

javascriptpythonhtmlseleniumselenium-webdriver

Can you tell me why the jquery datepicker control is only loading a portion of the CSS?

Working on a new C#/ASP.Net application and I decided to incorporate the datepicker control that I've used before. I transferred all the necessary components from my previous app to this one. The appearance of the datepicker in the old app was like th ...

c#jquerycssasp.net

Conducting various calculations and showcasing them all on a single webpage

Uncertain about what to name this, but let's see if you understand my question. I have a table on a standard HTML page and I am performing some calculations using Javascript/jQuery. Example: function addThem() { var result; result = userIn ...

javascriptjqueryhtml

Styling the background of the endAdornment in a material-ui textfield using React

I tried following the instructions from this source: Unfortunately, the example code provided doesn't seem to be functioning properly now. Is there a way to achieve the same result without having that right margin so that it aligns better with the r ...

javascriptcssreactjsmaterial-uitextfield