Question 43901 in Html Question posted in
Some basic documentation can be found here.

CSS border-radius property not working efficiently on Firefox browser – Html

I have set border-radius property with CSS to table element on my web page. This configuration is working successfully on Chrome, Opera and Edge. But there is some bug(I suppose) on Firefox like this:
FirefoxImage

This unexpected corners is not appearing on other browsers.
On chrome like this:
ChromeImage

My CSS codes for table:

    #projectList {
        position: relative;
        top: 5px;
        border-radius: 25px 25px 25px 25px;
        overflow: hidden;
        border-collapse: collapse;
        overflow: hidden;
        border-style:solid;
        background-color:transparent;
    }

Table format on inspector:
table

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have solved the problem. I have changed that border-style property as none. As you see border-style was solid on my answer.

     #projectList {
    position: relative;
    top: 5px;
    border-radius: 25px 25px 25px 25px;
    overflow: hidden;
    border-collapse: collapse;
    overflow: hidden;
    border-style:none;
    background-color:transparent;
}

    Its really interesting but it works.


  2. 0

    you need reset.css to fix browser default style

    it is a group of style to clear browser default style, you can find many versions of reset.css on internet

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search