Border radius don't show

[Allan]

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

My code:

.border_cat {
border: 1px solid #cccccc !important;
border-radius: 10px !important;
box-shadow: rgba(0,0,0,0.08) 0px 1px 3px;
}

 

[Jake Bunce]

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

Can you post a URL to the page showing the problem?

 

[Allan]

No, it's on local test

I have my css here: node_category_level_1 (red text)

<xen:if is="{$renderedChildren}">
<ol class="nodeList border_cat">
<xen:foreach loop="$renderedChildren" value="$child">{xen:raw $child}</xen:foreach>
</ol>
</xen:if>

 

[Allan]

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

 

[Jake Bunce]

Add some padding:

.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.

 

[Kier]

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.

 

[Allan]

Add some padding:

.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.

Ha yes, i understand, it work now, thank you Jake

 

[Allan]

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.

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