I have 5 browsers for rendering html coded pages: IE9, Firefox 4.0 and all the newest versions of Chrome, Safari and Opera. Now in IE9 and Firefox 4.0 an image is being cropped properly in using border-radius: and -moz-border-radius: but fails in Opera, Chrome and Safari using -webkit-border-radius:. With Opera the image is not being cropped at all and with Safari and Chrome the image is somewhat cropped but with the border being cropped out as well.
.nonTyp{
margin: 15px 15px 15px 15px;
border:4px inset #C1C8DD;
border-radius:25px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
width:200px;
height:200px;
}
If you have one of the 3 browsers mentioned that utilize -webkit-border-radius: please view images for example of what I have an issue with:
Graphics Page
What you could do is put all styling that's on the <img> tag now, on the parent <a> instead so as to use it as the container for the image. This, at least to me, makes more sense as well. Don't forget to keep float: left on the image to get rid of phantom bottom margin either.
I think it's because it is in the foreground above the border
try using the same code you have above, but in your html:
<div class="nonTyp" style="background-image:url('image.jpg');"></div>
This probably has to do with the order in which the border vs. radius clip is applied, but is very strange. A solution is to move the border-radius and related definitions to the enclosing tag. Remember to declare display:block so it's treated as block level on all browsers.
This worked for me in Chrome and Safari.
Image is top level.
div.someclass with radius 5px and div.someclass img with radius 4px.
That seems to make the corners look cleaner in Chrome and Safari.
.someclass {
...
border: 1px solid #000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
-webkit-box-shadow: 0px 0px 5px #000;
-moz-box-shadow: 0px 0px 5px #000;
box-shadow: 0px 0px 5px #000;
}
.someclass img {
...
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
I think drawing functions that Chrome uses for image and link are works differently between each other. And that causes a blank space between image and the link.
I partially fixed this bug via modifying Matjis' jsfiddle code a little bit. I moved img tags position to left.
.gallery a img {
...
position:relative;
left: 2px;
}
This solution may work if you set different radius values for image and the link.
Related
I'm applying border-radius for a few elements on my page, and in order to make it work on IE 6-8, I'm using PIE.
Check it out
So as you can see, corners without values (or with values very different from each other) for border-radius, effect gets this weird.
Here's my code:
.cotacao {
-webkit-border-radius: 1px 20px 1px 20px;
-moz-border-radius: 1px 20px 1px 20px;
border-radius: 1px 20px 1px 20px;
border: 10px solid #fff;
}
And specific code for IE
.cotacao {
behavior:url(/Assets/css/common/PIE.htc);
position: relative !important;
}
What's going on? Is this bug related to the border thickness? And, if it is, is there a known workaround?
Thanks!
This is a bug in the PIE 1.0 code. See https://github.com/lojjic/PIE/issues/11
It's fixed in the 2.0 beta if you're willing to try that.
I added 1 pixel border to the image. At the same time I am trying to give radius to the image edges.
My problem is since the image is already rounded with photoshop, the border of edges look thinner than it should be
You can check it from here.
http://jsfiddle.net/fVNgA/
How can I make the border even?
img{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 1px solid #000; }
<img src='http://carantina.com/wp/wp-content/themes/new/images/home_pic1.jpg'>
Wrap image into a span and add css to it
http://jsfiddle.net/96wVp/
Add "padding: 1px;" to the image styles :)
By the way, here is another thread outlining a similar issue, and the reasons for is: CSS 3 border-radius property; corners too pale in Chrome?
The problem isn't so much the border as how it's applied and the image you're using. Try rounding the corners in Photoshop with a 6px radius and save it as a png with a transparent background. What's happening is you're placing a border then the border is actually moving under the corner of the image. Since your image is a jpg and jpg's don't support transparency your rounded corners actually have square white corners. Here is an example of your image with a transparent image rather than a jpg.
http://jsfiddle.net/calder12/fVNgA/6/
Code just because they won't let me post a fiddle without code... sometimes it makes sense >.>
<style>img{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 1px solid #000; } </style>
<img src='http://calderonline.com/images/home_pic1.png'>
Chrome uses square corners for the inner borders. So in Chrome, you won't be able to get the exact feel, where as in Firefox, it uses rounded corners even for the inner borders.
Screenshot in Chrome and Firefox
My advice is it is better to include the generic border-radius and also, for Chrome, a fix would be adding overflow: hidden; and padding: 1px;.
CSS
img {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; /* Add this for fallback */
overflow: hidden; /* Hack for Chrome */
padding: 1px; /* Hack for Chrome */
border: 1px solid #000;
}
After Chrome Hack
I cannot seem to get a border radius no matter what I do. I am running the latest internet explorer and nothing is happening. I have gone into the developer tools and set the rendering to ie9 and it still refuses to read:
border-radius: 4px;
As far as I understand, ie9 does in fact support this CSS3 element. Am I do doing wrong? I am trying to get the browsers to see more or less the same page. Any suggesions? Any help is greatly appreciated!
Try adding some of the following:
border-radius: 4px 0 0 0;
-webkit-border-radius: 4px 0 0 0;
-moz-border-radius: 4px 0 0 0;
Be sure that these items are in the correct css class you are trying to apply to the form element.
I recommend you to define all border properties. Here is an example;
input{
border: solid 4px #06C;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
height: 40px;
width: 100px
}
Here is a working Live Demo, running smooth in my IE9.
Note: Here is a list of browsers supporting CSS3 and others will not.
YOU have a website for create border-radius css code
border-radius : 4px; // for new ie, opera, chrome, firefox
is a new W3C specification for new browser,
if you can use border radius for old browser, you can use
-webkit-border-radius : 4px; // for old chrome, old safari
-moz-border-radius : 4px; // for old firefox
-o-border-radius : 4px; // for old opera version
for old ie version, you want to use CSS3PIE.
as u can see the border is missing from the corners (red one). if i make it 4+ px thick then its ok but i need it 1px thin. why it is a problem? ist this property behaves by design like this?
the html
<div class="win" >
<img class="rounded" src='red.jpg' />
</div>
and the css
.win{width:188px;float:left;margin:0 30px 25px 0;}
.win .rounded {
overflow: hidden;
behavior: url(PIE.htc);
border:1px solid #000;
-moz-border-radius: 7px; /* Firefox */
-webkit-border-radius: 7px; /* Safari and Chrome */
border-radius: 7px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
}
/EDIT/
finally i have found a solution which makes exactly what i needed. i share the link maybe someone else has the the same problem:
http://webdesignerwall.com/tutorials/css3-rounded-image-with-jquery
You should have a look at the background-clip css property. Try background-clip: padding-box. You should also add -webkit-background-clip and -moz-background-clip to support older browsers.
There is an issue using border-radius with images in most/all browsers. There are a number of online articles about this but I've not paid attention to them. You should Google for those.
If you want good rounded borders that will work with a large number of browsers, you could use image as a background for a div with needed css-properties.
Example (only border, nothing else):
html
<div class="card" style="background:url(image.jpg) no-repeat center center; width:150px; height:150px;"></div>
css
.card {
border:1px solid #000;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}
i am writing an application using html,css and javascript. i have set border radius of button to have rounded corner but which is not working in opera browser. but same i have tested in chrome it works. please do give some suggestion or help on this. here is demo
Rounded Corner or all browser you want to use folloing method
#divId{
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
}
Its work for me perfectly.
Unfortunately the Border-radius css style is not fully cross-browser supported. Opera is one browser that does not offer support.
See: http://www.westciv.com/iphonetests/
First, did you try -o-border-radius? Second did you try on a plain div? Sometimes form elements reject certain styles. Otherwise it isn't support (opera10 didn't have it).
Border radius in Opera with other demos related to Opera.
button {
background:#000;
color:#fff;
border-radius: 15px;
}
In Opera you can use this:
.className {
-o-border-radius: 3px;
}
I ran into the same problem and found out that although border-radius is supported in Opera, it doesn't quite work with buttons.
But I managed to make it work, and achieved almost the same results. Here's my solution.
Just recreate behavior of the button with following style:
button {
background-color: #ccc;
border-style: outset;
border-color: #eee;
border-radius: 6px;
}
button:hover, button:active, button:focus {
background-color: #ddd;
}
button:active { border-style: inset; }
The thing is, that border-radius works, when you change border-style property. The behavior of Firefox, for example, when you just use border-radius, looks like it's using border-style: outset for normal behavior of button, and border-style: inset, when the button is clicked.
There are only 2 extra lines to make it work in Opera almost the same way as in other browsers.