Firefox not properly rounding the border radius of the background

My table is displaying incorrectly on Firefox, while Chrome and IE are showing it correctly. The issue seems to be with the top and bottom rows of the table where I have rounded the edges using the CSS below:

table {
    border-radius: 15px;
}
.topLeft {
    border-top-left-radius: 15px;
}
.topRight {
    border-top-right-radius: 15px;

For example, in the header row of my table:

<tr bgcolor=#cc9933>
    <th width=100 align=center class=topLeft>Owner</th>
    <th width=50 class=topRight>Points</th>
</tr>

The problem arises when using Firefox as the background color set in the <tr> tag does not appear rounded. Is there an issue with Firefox or are Chrome and IE overlooking a coding mistake?

https://i.sstatic.net/4FZtm.png Firefox 58.0.2

https://i.sstatic.net/hiqWd.png IE 11.1770.14393.0

https://i.sstatic.net/OiTE6.png Chrome 64.0.3282.186

htmlcss

Answer №1

This issue appears to be a common problem across different web browsers. One way to work around it is by specifying the background color for the table headers like this:

th {
  background: #cc9933;
}

To see this solution in action, you can check out this example on jsFiddle.

As for the reason behind this inconsistency, the Mozilla Developer Network (MDN) documentation on border-radius states:

The behavior of border radius on internal table elements is currently undefined.

Therefore, Chrome may support applying border-radius to table rows (<tr>), while Firefox does not. Both browsers are within their specifications, leading to differences in rendering.

Answer №2

Attempt to conceal excess content

table {
  overflow: hidden;
}

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

What kinds of options can be sorted into categories within a dropdown menu?

I am searching for websites that showcase categorized drop-down options for inspiration. Some examples could be: Fruit Apple Pear Peach Melon Vegetables Asparagus Beetroot Broccoli Herbs Basil Dill Ginger The main headings would not be clickable ...

htmlcssdrop-down-menu

Determining if a component is nested within itself in Angular 6 is a crucial task

My goal is to develop a custom Angular component for a nested navigation menu with multiple levels. Below is an example of how the menu structure looks: app.component.html <nav-menu> <nav-menu-item>Section 1</nav-menu-item> <nav- ...

javascripthtmlcssangular

Is there a way to adjust the width of my editor file in vscode to prevent the need for horizontal scrolling when reading a paragraph to the end?

My lorem ipsum text in vscode is displaying as one long line, forcing me to scroll horizontally instead of seeing it formatted into paragraphs. https://i.stack.imgur.com/LIja8.png Is there a way to adjust the width of the editor box to prevent the need f ...

htmlvisual-studiovisual-studio-codecode-editor

Issue with Resizing: Custom Icons Drifting from Right Side of Header

My header is a bit messy. I wanted it to be based on the full-width image without changing its height. To achieve this, I floated the header image to the left and created a div that filled in the color of the image across the entire page. After that, I add ...

csshtmliconscss-float

The issue with Scrolltop is that it is not aligning to the intended

My goal is to focus the top of a div when an anchor is clicked using the code below. $('html, body').animate({scrollTop: $("#" + divid).offset().top}, 100); Unfortunately, instead of scrolling to the top of the div, the focus ends up at a posit ...

javascriptjqueryhtml

What could be causing the hover effect to not work on the cards in my Svelte component? (HTML+CSS)

Greetings everyone! This is my debut post on this platform, and I'm in urgent need of assistance as I am relatively new to the world of programming. I've been trying tirelessly to implement a hover effect on these cards, but for some reason, it ...

javascripthtmlcssbootstrap-5svelte

Navbar Growth Effect

I'm attempting to create an expanding effect in my navbar using Angular. When I click on "show information," the content should slide up. The issue is that the top part of my footer does not follow the effect. I have tried something like: <foot ...

htmlangulartypescript

What is the best way to incorporate Bootstrap 5 into a content script without causing any conflicts with the existing CSS of the website? (Chrome Extension)

In the process of integrating the Bootstrap 5 library into a Chrome extension, I have encountered an issue where the CSS and JS files conflict with the main CSS file on certain websites. To address this, I have included the Bootstrap 5 (CSS and JS) files i ...

javascriptcssgoogle-chrome-extensionbootstrap-5

Mastering the Art of jQuery: Easily Choosing and Concealing a Div Element

I'm currently facing challenges in removing a div upon successful AJAX completion. The issue I'm encountering is that the word "Added" appears twice after success, indicating that I am not properly selecting the two divs containing it. Any sugges ...

javascriptjqueryhtmlcss

Angular: Revise information in a table row

Hi there, I am currently in the process of learning Angular and could use some assistance with a specific functionality. I have a dynamic table and a form set up, and my goal is to populate the input boxes in the form with data from any row of the dynamic ...

javascripthtmlangularjs

Issue with border-bottom overlapping menu items

Is there a way to add a border-bottom-image (such as an arrow with 159px width) without affecting the width of the <li> element? I'm facing an issue where setting the width of the <li> to 159px causes layout problems with other elements. ...

jqueryhtmlcss

There is a single successful match for the regex

I am facing an issue with my regex that is supposed to rewrite [img]foo.bar[/img] to , which it successfully does. However, the problem arises when there are two or more instances of [img]url.ext[/img] in the string. Instead of matching each one individual ...

phphtmlregex

What is the best way to extract text that falls between two specific patterns using the preg_match_all function in PHP

I've been struggling to locate two specific HTML tags and extract the content in between them. When I search for each tag individually, they are found successfully, so I am confident that they are spelled correctly and do exist. However, I believe the ...

phphtmlregexpreg-match-all

width and height specifications for the device

Struggling to determine the device-height after setting predefined device-widths such as: For Extra small devices Phones (<768px) For Small devices Tablets (≥768px) For Medium devices Desktops (≥992px) For Large devices Desktops (≥1200px) I& ...

cssresponsive-designmedia-queries

Steps for implementing a click event on the <select> element

Exploring Angular 2 and TypeScript Is there a way to use (click)="functionA()" within an <option> tag? I've tried the following code but it doesn't seem to work. <select class="form-control"> <option>1</option> ...

htmlcssangular

Issue with OpenLayers Icon not appearing on screen

I just finished creating a SpringBoot app using Spring Initializer, JPA, embedded Tomcat, Thymeleaf template engine, and packaging it as an executable JAR file. Within this app, I have integrated OpenLayers 4 library to display a map with an Icon. Howeve ...

javascripthtmlthymeleafopenlayersopenstreetmap

Hold off on showing the image until it has finished loading

// Here's the code snippet angular .module('imgapp', []) .controller('mainCtrl', mainCtrl); function mainCtrl() { var vm = this; vm.first = { title: 'Image 1', url: 'http://www.image-mapper.com ...

javascripthtmlangularjs

I'm interested in learning the best way to insert the images from this JSON file into the corresponding div elements

I have completed developing a clone of an Instagram web page. Although I can retrieve data from the JSON file and insert it into the <img> tag, I am facing difficulty in displaying each image above its respective .below-image div with consistent spac ...

javascriptjqueryhtmlcssjson

Is there a way to utilize jinja2 templates to display the elements in the 'route' list through printing?

I am trying to send the response to templates with a specific name through a form. Can someone guide me on how to print the elements of the 'route' list using jinja2 templates? I have included both my index.py page code and the desired output bel ...

pythonhtmlflaskjinja2

Identifying CSS div tags in CakePHP with unique class names

After running cake bake, a test installation was created resulting in the Product Controller and its associated views such as index.cpt, add.cpt, edit.ctp, etc. Upon inspecting the CSS file linked to these views, I noticed two specific divisions: action an ...

htmlcsscakephp