CODEWITHSUNDEEP
htmlcssfirefox
user3044394
user3044394

Reputation: 135

border-radius firefox not working

I'm trying to get the border-radius property to work on a table in Firefox. It works fine in chrome and I don't care about IE 8 and lower.

My CSS:

table.tableCenter{
    padding: 0;
    width: 100%;
    -moz-border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    margin: auto;
    overflow: hidden;
    border-collapse: collapse; 
}

Here is a fiddle demonstrating the issue as well. https://jsfiddle.net/1o6mzvff/

Thank you for your time.

Upvotes: 0

Views: 1306

Answers (3)

Marjan Simić
Marjan Simić

Reputation: 1

amm i think you have to add border: 1px solid #fff;

Upvotes: 0

Q_45
Q_45

Reputation: 23

I took out my trusty Visual Page (an extremely archaic web page editor) and I did this and it worked just fine:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=iso-8859-1">
    <META NAME="GENERATOR" Content="Visual Page 2.0 for Windows">
    <TITLE>untitled</TITLE>
</HEAD>
<BODY>
<P>
<TABLE BORDER="0" WIDTH="100%" STYLE="border-radius : 15px; border : 1px solid black;">
    <TR>
        <TD WIDTH="33%">adfasdfsads</TD>
        <TD WIDTH="33%">asfsdfsadfasdfsaf</TD>
        <TD WIDTH="34%">safsadfsaf</TD>
    </TR>
    <TR>
        <TD WIDTH="33%">sdfsafsdfsadf</TD>
        <TD WIDTH="33%">sadfsadfsdfsaf</TD>
        <TD WIDTH="34%">sfdsafsdfds</TD>
    </TR>
    <TR>
        <TD WIDTH="33%">sadfsdfasfdas</TD>
        <TD WIDTH="33%">safsdfsadf</TD>
        <TD WIDTH="34%">safdsdfsdf</TD>
    </TR>
</TABLE>
</BODY>
</HTML>

Do you have your DOCTYPE at the start? That can affect things sometimes. The same holds true for the HTTP-EQUIV Meta command. Also, sometimes doing these things in the STYLE attribute will work when the CSS does not work. I know - not supposed to do that. I think why this happens is you get a conflict somewhere in your CSS and then the STYLE command takes precedent so it straightens out the problem. Unknown really.

Upvotes: 1

Thomas Landauer
Thomas Landauer

Reputation: 8355

To me, it looks like border-radius is not working on a <table>: Try adding display:block; to table.tableCenter{ } and you get the round border.

Suggestions:

  1. Get rid of the table ;-)
  2. Or (untested): Use a <div> instead of <table>, and use display:table (plus display:table-row and table-cell for the nested <tr>/<td>'s which need to become <div>'s as well for HTML-validity).

I would go for the first option, cause it looks like you're using the table for layout only, which is bad markup anyway ;-)

Upvotes: 1

Related Questions