http://jsfiddle.net/pixelfreak/Eq246/
Notice the gray border on the white triangle. This only happens on FF 6 Windows (I did not test on older FF version)
Is there a fix to this? It looks like bad anti-aliasing or something.
Give it a try with this:
border-style: outset;
http://jsfiddle.net/KDREU/
edit
Looks like if you put outset on one of the 4 border styles you can use colors other than white and not have them lightened.
/* This works for an orange down arrow that I'm using. */
border-style: solid outset solid solid;
http://jsfiddle.net/fEKrE/1/
It happens on FF6 on Linux too. It's going to be an artifact from antialiasing the diagonal line. AFAIK, there isn't a way around this other than to use an image.
fixed with
border-style: solid dashed solid solid;
tested on firefox 19.0.2, opera 12.04, chromium 25.0.1359.0
Related
Consider the following code
HTML
<p class="dotted3">A dotted border with squares.</p>
<p class="dotted4">A dotted border with circles.</p>
CSS
p.dotted3 {border: 3px dotted #000;}
p.dotted4 {border: 4px dotted #000;}
Why does the border at 3px look like squares but circles at 4px?
image: difference between 3 and 4px with dotted border
It looks like that's a common behavior in several browsers, probably for avoiding loss of border quality. Take a look at some examples.
Chrome (version 92.0)
Edge (version 92.0)
Safari (version 12.1)
Here, the dotted border is always showing as squares, even when it's wider (the image shows a comparison between 3px and 15px borders).
In Firefox (version 92.0), the border doesn't get squared. However, you can notice a little loss of quality in its circles.
Please check this fiddle
input {
border: 1px solid blue;
padding: 4px;
border-radius: 5px;
background: transparent;
}
It looks good in any browsers other than IE 11.
If you test it in IE11 you'll see that the border is broken (white pixels) at the beginning (top and bottom) just after rounded corners, like this:
What do I miss in my style declaration?
I am able to replicate this issue in IE 11 inside virtual box. It works correctly in Edge.
This is the only solution I could find to fix this issue:
Go to device manager and disable the default Virtual box display adaptor.
I need to use CSS triangle to create and arrow. This is the one Im working on: http://jsfiddle.net/7vRca/
<div class="arrow-outer"></div>
.arrow-outer{
border: 1em solid transparent;
border-top-color: #3bb0d7;
border-right-color: #3bb0d7;
height: 0;
width: 0;
}
The issue is that in chrome it looks perfect. But in firefox there is a small bent in the middle.
Any idea why this is happening and how can I make it look smooth as in chrome?
I haven't got a mac to test unfortunately and Firefox on Windows seems to render correctly. You could get around the problem though...
.arrow-outer {
border: 2em solid transparent;
border-right: 0;
border-top-color: #3bb0d7;
height: 0;
width: 0;
}
Instead of rendering the triangle as two sides of the border, it flattens the right border to achieve the same shape using only the top border, circumventing any alignment issues (illustrated below).
It is possible that Firefox on Mac OS is rendering the div as a pixel height which might be solved using an overflow hidden, but it is equally if not more likely that the rounding in the rendering algorithm has resulted in different pixels being selected for the edge of the right border for that combination of browser and OS. That would be my guess as to why it is happening.
Setting 'inset' for the transparent borders helped for me. I found this trick here: http://css-tricks.com/snippets/css/css-triangle/#comment-103785
Try add this into css:
-moz-transform: scale(.9999);
Try using RGB instead of transparent,
<div class="arrow-outer"></div>
.arrow-outer{
border: 1em solid rgba(255,255,255,0);
border-top-color: #3bb0d7;
border-right-color: #3bb0d7;
height: 0;
width: 0;
}
as we did here: Weird dark border :after css arrow in Firefox
EDIT: by the way, it worsk in both ways in my Firefox (one with the gray line, the others without, but never the effect you described...)
as you see there are two pictures.First, on chrome . There are Beğen and Yorumlar buttons on right side.Border is looking very well..
But second pictures shows that ; firefox and opera have problem with border radius.I try to do border-witdh:thin, border:1px solid etc.. But Its look like same.
How can handdle it ? Do you have any idea ?
sorry for my english.Thank you
image on chrome
image on ff and opera
This effect is commonly referred to as "background bleed", or "leaking". It can be fixed through some simple CSS:
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
I first learned of this from Mike Harding's blog:
http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed
And here's the W3C spec:
http://www.w3.org/TR/css3-background/#the-background-clip
... it almost looks like may get away without using border at all. There's enough contrast between the button and the background. Did you try using outer glow of 1px (blur-radius)?
-moz-box-shadow: [position-x] [position-y] [blur-radius] [color];
-webkit-box-shadow: [position-x] [position-y] [blur-radius] [color];
box-shadow: [position-x] [position-y] [blur-radius] [color];
To help with chome's border to border:1px double .... I know chrome has an issue with borders with a radius. Setting it to double rather than solid helps clean it up a bit. Kind of annoying.
Sorry for the obtuse title; here's a jsfiddle example.
Basically, I've got a div inside of another one. The big one has a light blue background, and the little one has a darker blue background.
I want to give the smaller one a border on hover, so I start it with the same size border but the same color as the background (so that it doesn't move around when the border is added).
This border that is the same color as the background artifacts when there's a border radius. Take a look at Chrome:
But Safari is fine:
Is this a known bug? Can I submit a report?
And more importantly, is there a workaround?
How about making your border transparent:
border: 2px solid transparent;
To make this work in IE6, you can add:
*html #inner
{
border-color: pink;
filter: chroma(color=pink);
}
The IE workaround is from http://acidmartin.wordpress.com/2008/08/24/emulating-border-color-transparent-in-internet-explorer-6/
Sometimes you can solve these issues by using background-clip: padding-box;.
It doesn't work quite perfectly on your jsfiddle example (http://jsfiddle.net/KPAVU/5/), but may have better results with the real markup.