Hi @thecashbag,
For border-radius, it’s a bug in the Firefox browser. But, it seems to be correct since the line element is border base (1 side border with 0px height) and the CSS is this
width: 100%;
max-width: 50%;
margin: 65px auto 65px auto;
border-top-width: 40px;
border-style: solid;
border-color: rgb(153, 153, 153);
border-radius: 10px;
Which means, that grey area is just a single border with thick size and there is no content or height at all. While the border-radius is only applicable to visible dimension, then it’s only taking effect to the top border of 40px (as example size). The border-radius will take effect on all sides if it’s not a border, but height like
width: 100%;
max-width: 50%;
margin: 65px auto 65px auto;
height: 40px;
border-color: rgb(153, 153, 153);
border-radius: 10px;
Hence, it’s not an actual bug but just how border-radius works, and of course, chrome behave differently as it counts the border size as the height of the entire element compared to Firefox. The line element is an <hr>
element which is by default styled as a border, hence, border-radius shouldn’t work at all. I’ll add this to our issue tracker, but for now, you may add an empty button as a line element replacement (with background and border-radius).
As for the columns, it’s because you added padding and border to the columns. Border and padding increases the dimension of the column. The total width of all columns on the same row should be 100% including margins, but it’s now more than 100% which pushes other columns down. Try setting the border to none and padding to 0.
Thanks!