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

css3 border radius only working properly in firefox


wwl777

Junior Member
#1
I've been using css3 border-radius for the first time. After testing I noticed that in opera, chrome and safari the borders are displayed weirdly.

In Firefox:


Same thing in Opera/Chrome/Safari:



CSS Code:

Code:
.tbl-img {    height: 300px; width: 200px;    border-bottom: 26px solid #2E737C;    margin: 0 10px;                border-radius: 3px;        -moz-border-radius: 3px;        -webkit-border-radius: 3px;    }
HTML:

Code:
<div class="tbl-img" style="background: url(images/photo_green_4.jpg) no-repeat; "></div>
Any idea why? Thanks in advance.
 

Sunburn

Active Member
#2
Hi ww1777

Incase you missed it, why not introduce yourself first to the community here....
http://www.designforums.co.uk/introductions/

In order to answer your question however,

The problem Is because your only specifying the bottom border! as such the border radius will curve in the very bottom most corner bits back into itself.

if you declare the left and right border properties also, the curve, would intersect with the left and right border creating the smooth curve your looking for (visually)


Code:
.tbl-img {    height: 300px; width: 200px;*  border-left: 26px solid #2E737C;*  border-right: 26px solid #2E737C;    border-bottom: 26px solid #2E737C;    margin: 0 10px;    border-radius: 3px;   -moz-border-radius: 3px;   -webkit-border-radius: 3px;    }
 

wwl777

Junior Member
#3
Thanks for your reply sunburn. I'm sorry, I already wondered if there maybe was an intro section, but I hadn't taken time to look for it. Now I've just posted a message there!

About your solution; i see something in what your saying , because it is indeed working propery on other parts of the site that don't have a specific border set. But when I try the code it just adds a 26px border to the left and right of the image. Result:

 

Harry

Senior Member
#4
Blind guess, try this code:

Code:
img{padding-bottom:26px;background:#2E737C;-moz-border-radius:3px;-webkit-border-radius:3px;-o-border-radius:3px;border-radius:3px;}
 

Sunburn

Active Member
#5
Hi ww1777,

Sorry I not got safari here with me at the moment, but you could try the following....

Code:
<div class="border">		<div id="content">		</div>	</div>
Code:
.border {    width: 148px; /* - the left and right border width  ala 200px - 26px - 26px/*    border: 26px solid #2E737C;    border-top:0;        -moz-border-radius:3px;    -webkit-border-radius:3px;    -o-border-radius:3px;      border-radius:3px;    }#content {	height: 300px;  /* just to confine the hotlinked image */        width: 200px; /* just to confine the hotlinked image */	margin-left:-26px; /* negetive value of your side border */	background:  url(http://www.thesunblog.com/gourmetgal/apples.jpg) no-repeat 0 0;}
Geoff

PS. cheers Harry didnt read about it needing to be opera as well.
-o-border-radius:3px;

PPS. I have no idea if it works using ie6 at the mo lol
 

Sunburn

Active Member
#7
Yes that will work Harry, but he's using a background image in css, thus the image is not "on top" of the border.
If he adjusts his code to yours = win :)
 

wwl777

Junior Member
#12
Thanks both! Was having dinner. The example you gave is really helpful. What makes it a bit more complex is that I can't do the markup in my css file, because I have a different image for every page ($img source generated with php)

Code:
echo '<div style="height:300px; width:200px; padding-bottom: 26px; background: url(images/'.$img.') no-repeat #2E737C; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius:3px; -o-border-radius:3px; border-radius:3px;"></div>';
Is working!

I had a similar problem with my navigation looking like this in opera:.



But after applying the same principle

Code:
nav li {    background: #8db9bf;    padding-left: 10px;}nav li:hover {    background: #738C8F;    padding: 0 10px;    border-radius: 3px;    -moz-border-radius: 3px;    -webkit-border-radius: 3px;    -o-border-radius:3px;    }.buttons a:link, .buttons a:visited {color: #1C3C40;    background-color: #ffffff;    padding: 2px;    padding-left: 6px;    display: block;    text-decoration: none;    text-align: left;    margin-top: 1px;    }.buttons a:hover, .buttons a:active {border-left: 10px solid #738C8F;    text-decoration: none;    color: #1C3C40;    text-shadow: 1px 1px 1px #8db9bf;     /*border-right: 10px solid #738C8F;*/    border-left: 0px;    }
Tadaa, it now has the same result as in firefox:



:clap:Its a bit messy, my first job with border radius, but this will help me whenever I need to achieve the same.

Oh , btw I wanted to add the question if I need to declare all 4 (border-radius , -moz-border-radius , -webkit-border-radius and -o-border-radius) every time I do something with border-radius?
 

Harry

Senior Member
#13
Good stuff, glad it's working :)

Yeah you need to specify all four, it doesn't matter which order as long as non-prefixed one (e.g. border-radius) is last.

H