Forums

Border Radius CSS applied to DIV not rendering all corners

Permalink
Hi Everyone

Been a while since I've been on here...

I've got a theme that has a border-radius applied to a div id, where I want to place a C5 slideshow. In html, it looked fine, but once I have changed it over to a C5 theme, and added the slideshow, the corners are only rendering on the bottom 2 corners and not the top... any ideas?

Cheers, Pat
PatrickCassidy
 
ronyDdeveloper replied on at Permalink Reply
ronyDdeveloper
It seems like the slider moved up, so you cannot see the rounded corner on the upper 2 sides. Try to adjust your css so that the slider fits into the div.

Rony
PatrickCassidy replied on at Permalink Reply
PatrickCassidy
Yeah... I've just been retracing my steps. I've built the site with the 960 grid and all of my horizontal spacing is done with padding, not margins, so the actual rounded edge appears beyond and above the slideshow. Is there a way to target the slideshow itself to have round corners?

I've used firebug and tried to add border-radius to a number of elements (ccm-SlideshowBlock-display13, ccm-SlideshowBlock-display, etc) but to no avail...
ronyDdeveloper replied on at Permalink Reply
ronyDdeveloper
This is what you need to write to make it working:
.ccm-SlideshowBlock-display {
    background-color: #CCCCCC;  //Set your own color
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    khtml-border-radius: 6px;
    border-radius: 6px;
    clear: both;
    position: relative;
    width: 100%;
}
PatrickCassidy replied on at Permalink Reply
PatrickCassidy
No Luck Rony. I even tried putting !important after the radius (I've had good results doing this before)
ronyDdeveloper replied on at Permalink Reply
ronyDdeveloper
Share live url if any.. It would be good to look at.
PatrickCassidy replied on at Permalink Reply
PatrickCassidy
I'm on localhost at the moment... will do when I push it to my server.
PatrickCassidy replied on at Permalink Reply
PatrickCassidy
The link is:http://www.atlashobbies.com.au
ronyDdeveloper replied on at Permalink Best Answer Reply
ronyDdeveloper
The outer div in which you are trying to apply the border-radius is purely white color. So it doesn't reflect into white background. You need to put the css into inner div. Like:
.slideImgWrap div {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    khtml-border-radius: 4px;
    border-radius: 4px;
}


Rony
PatrickCassidy replied on at Permalink Reply
PatrickCassidy
Thanks Rony!
middlegrounduk replied on at Permalink Reply
middlegrounduk
I was just having a similar problem. Thanks Rony, works a treat :-)