ThemeShaper Forums » Thematic


Remove white corners from menu with border radius

(6 posts)
  • Started 11 years ago by sdaveCL
  • Latest reply from sdaveCL
  • This topic is resolved
  1. sdaveCL

    I feel a bit daft, but for the life of me I cannot figure this out.

    I added border radius to to the styling of the menu:
    .sf-menu a {-moz-border-radius:10px; border-radius:10px;}

    ...but little white corners remain. This looks weird on a black background!

    I have tried placing overflow:hidden; under various things in the child style.css but nothing works.

    Any ideas?

    Posted 11 years ago #
  2. use firebug or chrome dev tools. you will find that thematic's default skin has a white background on the LI element. i am not a fan of that styling, but that's how it is.

    Posted 11 years ago #
  3. Also, a little tidbit to keep up on the latest info.

    Border Radius no longer needs to be prefixed with -moz or -webkit.

    .sf-menu a { border-radius:10px; }

    Save yourself a little time in the future. ;)

    Posted 11 years ago #
  4. @scott - mozilla supports this now? sweet!

    Posted 11 years ago #
  5. Yup, same with CSS3 box-shadow, no need to prefix that. I hate prefixes with a passion, imagine all the tutorials out there and tools for generating CSS3 for both those that will never be updated to reflect not needing prefixes.

    Posted 11 years ago #
  6. sdaveCL

    Yup, that was the ticket. Thanks much!

    Didn't know that about the prefixes either. Thanks Scott.

    Posted 11 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.