1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Border radius don't show

Discussion in 'Styling and Customization Questions' started by Allan, Jan 9, 2012.

  1. Allan

    Allan Well-Known Member

    I work on a new style, but i have one problem, the border radius don't show, an idea ?

    My code:
    Code:
    .border_cat {
    border: 1px solid #cccccc !important;
    border-radius: 10px !important;
    box-shadow: rgba(0,0,0,0.08) 0px 1px 3px;
    }
    
    border.png
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Your CSS is correct. I tested it on my forum.

    Can you post a URL to the page showing the problem?
     
  3. Allan

    Allan Well-Known Member

    No, it's on local test :(

    I have my css here: node_category_level_1 (red text)
     
  4. Allan

    Allan Well-Known Member

    But if i delete the radius lign, it's correct:

    radius2.png
     
  5. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Add some padding:

    Code:
    .border_cat {
    border: 1px solid #cccccc !important;
    border-radius: 10px !important;
    box-shadow: rgba(0,0,0,0.08) 0px 1px 3px;
    padding: 10px;
    }
    
    That will fix it.
     
  6. Kier

    Kier XenForo Developer Staff Member

    The problem is that the box inside the one with border radius does not have a border radius of its own, so it's busting out of the radiused container. Add a border radius to the internal box with the background image / colour of one pixel less than the outer box, and it will work fine.
     
  7. Allan

    Allan Well-Known Member

    Ha yes, i understand, it work now, thank you Jake ;)
     
  8. Allan

    Allan Well-Known Member

    Yes, that's what I thought also when Jake spoke to me to the padding.
     

Share This Page