CSS Broken round border corners

Discussion in 'CSS' started by Iknowyou, Feb 28, 2012.

0
  1. #1
    Hi guys I am having a problem where I am getting broken border corners.

    http://wedopvp.com/

    Its at the top corners of my widget area (side bar)

    My code for that area is:

     
    
.widgetcontainer      { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: #005d7f 1px solid; }
.widgetcontainer a        { font-weight: 700; }
.widgetcontainer .excerpt    { font-size: 11px; margin: 5px 0; }
.widgettitle   { color: #cfcfcf; font-size: 12px; font-weight: 700; margin: -10px -10px 10px; padding: 5px 10px; background: #070707; border-bottom: 1px solid #005d7f; }

.widgettitle a    { color: #333; }
    Code (markup):


    I think the problem could be caused somewhere in my .widgettitle but I am just not sure. Thought it wouldn't happen if I don't use any IMG.

    Please help me.

    Cheers
     
    Iknowyou, Feb 28, 2012 IP
  2. trendint

    trendint Peon

    Messages:
    52
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Your borders are fine; it's the h5 you are using for the text - since those are still inline elements they have a box model that overlaps the borders. Change the margin on .widgettitle to "margin: -10px 0px 10px" and it will look right.
     
    trendint, Feb 28, 2012 IP
  3. Iknowyou

    Iknowyou Greenhorn

    Messages:
    73
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    18
    #3
    Hey thanks a lot, that solved the problem :)

    cheers~
     
    Iknowyou, Feb 28, 2012 IP
  4. trendint

    trendint Peon

    Messages:
    52
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    No prob - this is common with items located within something that has rounded corners. The best remedy is either making the inside element smaller to prevent the overlap, or to add rounded (though colorless) borders to match the desired outline.
     
    trendint, Feb 28, 2012 IP
    Iknowyou likes this.
  5. mandeepbamral

    mandeepbamral Banned

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #5
    color property consists of four individual properties.But i have little knowledge about css according you should help w3school this great site for learning css lots off language.
    border-top-color

    border-right-color
    border-bottom-color
    border-left-color
     
    mandeepbamral, Mar 9, 2012 IP