Can someone explain me why the top-left and bottom-left corners are displayed in this way:
using the following CSS:
form .form-field
{
height: 20px;
padding: 5px;
border: 1px solid #ccc;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
both input field and the textarea have "form-field" class. (same behavior in Safari, Chrome and Firefox)
Like T.J. noted, something has a red background on it that's higher up in your DOM tree. Adding the border radius to your corners is exposing that. Use your browser's inspector to find it. Should be a quick fix.
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 was trying to apply rounded corners to an OpenLayers Maps, and found that it works in Firefox, but not in Chrome. I found a related question Openlayer map with rounded corners which linked me to another question CSS Border radius not trimming image on Webkit, which explained that Google Chrome does not apply the rounded corners to grandchildren Images.
However, while testing if I could apply it directly to the children, I found a strange behavior.
If I open up chrome, and test the code out, it gives the wrong behavior(Images do not have the required rounded corner), but when I go to the Developer tools, and mouse hover over the elements tabs (which highlights the various divs in the page), the style is applied correctly, and I get the expected output with rounded corners.
You can test out the behavior on this jsfiddle: http://jsfiddle.net/K9qQ2/2/
The CSS code I have used is as follows:
#map{
border: 6px solid #7AC49F;
border-radius: 30px 30px 30px 30px;
bottom: 0;
display: block;
height: auto;
left: 0;
margin: 39px 10px 10px;
position: absolute;
right: 0;
top: 0;
background-color:#eee;
}
div.olMapViewport {
border-radius: 25px;
}
.olLayerDiv{
border-radius: 25px;
}
So is this a bug? Is there anyway to get Google Chrome to apply the style without going to the developer tools?
Try adding display: block; to the other divs.
It seems to work in jsfiddle.
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 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.
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.