Perfect rounded corners in MyBB

[faviouz]

Of course, that's up to the designer. If the rounded corners are so important in the design that it would otherwise not work, then one should definitely make sure it's rounded in as many browsers as possible.

In this case, however, rounding up a couple of theads and tfoots is pretty insignificant in my opinion. It does give it a slightly different feeling, but older browser users won't be so dramatically affected. In the end you will have a significantly smaller stylesheet if you only include the vendor prefixes that are absolutely necessary.

[Spangle]

Could we have the URL to your site? It's easier to see what to edit if we can have a look at it.

You could click on the userbar in my siggie, or:

www.talkoftheterrace.net

[Jordan L.]

The theme on there looks different to the one in your post?

[Spangle]

The theme on there looks different to the one in your post?

Ah sorry my bad, the default is Novus Clover, the theme I want the buttons changed on are Italian Style.

[Jordan L.]

Well I can't help unless that theme is set as default. But honestly, from the screenshot you provided I think the buttons would look much better kept how they are - I don't think they'd suit being rounded.

[Zueq]

Great tutorial Jordan L.! Made a slight difference on my forum, but it looks good!

[Jordan L.]

I'm glad you liked it, Zueq.

[Niggidea]

Thats a really great tutorial and it really helped me out thanks for this.

Now to my question, all corners are perfectly just the one on user profile:



How can I fix this?

Thanks!

[Freddie Mercury]

Perfect, thanks man;

[Destroy666]

There were few leaks I fixed:

/* Selects the bottom lefthand corner of your tables. */
tr:last-child > .trow1:first-child, tr:last-child > .trow2:first-child,  tbody:last-child tr:last-child > .tcat:first-child {
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-bottom-left-radius: 4px;
}

/* Selects the bottom righthand corner of your tables. */
tr:last-child > .trow1:last-child, tr:last-child > .trow2:last-child{
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    border-bottom-right-radius: 4px;
}

/* Selects any table with the ID containing 'post' and gets rid of the rounding - this is for the showthread template. */
table[id*="post_"], td.post_buttons, tborder.posthead, tbody[id*="usercp"] > tr:last-child > td, tbody[id*="modcpforums"] > tr:last-child > td, tbody:first-child tr:last-child > .tcat:first-child{
    -webkit-border-radius: 0!important;
    -moz-border-radius: 0!important;
    border-radius: 0!important;
}

/* The custom template ID we added in to get rid of the ugly rounding on the showthread .thead */
table[id="notop"]{
    -webkit-border-bottom-right-radius: 0!important;
    -webkit-border-bottom-left-radius: 0!important;
    -moz-border-radius-bottomright: 0!important;
    -moz-border-radius-bottomleft: 0!important;
    border-bottom-right-radius: 0!important;
    border-bottom-left-radius: 0!important;
}

/* The custom template ID we added in to get rid of the ugly rounding on the showthread .tfoot */
table[id="nobottom"]{
    -webkit-border-top-left-radius: 0!important;
    -webkit-border-top-right-radius: 0!important;
    -moz-border-radius-topleft: 0!important;
    -moz-border-radius-topright: 0!important;
    border-top-left-radius: 0!important;
    border-top-right-radius: 0!important;
}

Added missing 0 in one -webkit- radius, added tbody:first-child tr:last-child > .tcat:first-child to get rid of roundings in some unneeded tcats and changed [id*="usercpp"] to [id*="usercp"].

Great tutorial though, saved me a lot of time, thanks.