Why does Chrome always add a 1px border-radius, even when specific corners are set to 0px? - css

When you apply a border-radius to an element in Google Chrome, I've noticed that all corners get a subtle 1px rounded corner, even if specific corners are set to 0px.
Consider the following:
.box { float: left; margin: 5px; width: 25px; height: 25px; border: 1px solid #888; }
.box1 { border-radius: 0; }
.box2 { border-radius: 1px; }
.box3 { border-radius: 0 0 5px 5px; }
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
The first two boxes are the controls for this experiment; as we would expect, box #1 has nice sharp corners, and box #2 has subtle 1px rounded corners. So far so good.
The strange thing is that box #3 also has 1px rounded corners on top, in spite of its border-radius value being 0 0 5px 5px. If you look at the computed values in the dev tools, both border-top-left-radius and border-top-right-radius are correctly set to 0px, but they are rendering as if they're set to 1px.
You need an eagle eye to see it, but it's definitely there. Here's a screenshot of the page in Chrome that I magnified using Photoshop to make it easier to see:
Notice that the top corners on box #3 are a softer/whiter gray than the rest of the border. They're identical to the 1px rounded corners of box #2, even though they're set to 0px.
Why is Chrome doing this, and how can I prevent it?
For the record, I'm on Windows 10 and I'm using the latest version of Chrome (v74.0.3729.108). The problem only exists in Chrome, not Firefox or Edge. I'm not sure if this is WebKit problem, or something specific to Chrome/PC.

Related

Drop Shadow In CSS Triangle

I have created essentially a large arrow pointing right.
<div style="
font-size: 0px; line-height: 0%; width: 100px;
border-bottom: 80px solid #8cb622;
border-right: 62px solid #dadbdf;
"></div>
<div style="
font-size: 0px; line-height: 0%; width: 100px;
border-top: 80px solid #8cb622;
border-right: 62px solid #dadbdf;
"></div>
Now I know this isn't "proper" but I am just testing right now.
I am wondering if there is a way that I can use this border technique and still somehow place a drop shadow on the leading bottom edge of the arrow. I was thinking of placing another div underneath it, but for this technique to work the other borders need to be visible.
If this can't be done using the border technique am I forced to use an image as the front of this arrow.
Thanks
You might want to consider using a Canvas to do this, which works cross platform very well with ExplorerCanvas included for MSIE compatibility (and of course is supported natively in WebKit & Gecko).
I believe it is box-shadow but that is likely to assume it works on the box model and probably won't compute the geometry created by the borders.

Border Radius and Large Spread Drop Shadow in Safari

I ran into an issue today with Safari (Version 11.0 (12604.1.38.1.7), border-radius, and a large spread drop shadow. This issue doesn't happen in Chrome, FF, or Edge.
The reason for the large drop shadow is to achieve a window like effect where element is visible, and the drop shadow is semi-transparent covering the whole screen.
After some trouble shooting I determined that drop-shadow works fine in Safari, but not when the spread is very large (like here) AND when the border radius of the container all match. Adjust one corner border radius to be one pixel different, and the issue goes away and the drop shadow spread works at the sizes I want.
Here's a quick and dirty CodePen demonstrating the issue.
The button will toggle the equal vs. non-equal border radius class. But feel free to adjust the box-shadow size and note that it works fine up to a certain point (2039px works, 2040px doesn't. This was slightly different from the breaking point I founder earlier in my own code which was ~2019).
I guess I have to paste code from CodePen here too.
HTML
<div class='wrapper'>
<div id='box-shadow-container' class="equal-border-radius">
<div id='box-shadow-fun'>
What's going on here? <br/><br/>
<button id='toggle-radius-class'> Swap Border Radius Class</button>
</div>
</div>
</div>
CSS
body {
display: flex;
flex-direction: column;
min-height: 400px;
}
.wrapper {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
#box-shadow-fun {
padding: 5px;
}
#box-shadow-container {
border: 1px solid #CCC;
box-shadow: 0 0 0 5000px black;
}
.one-different-border-radius {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 4px;
}
.equal-border-radius {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
Does anyone know the issue here? I can live with one corner being a pixel radius different, but I don't like not understanding a bug fix as it seems likely to break in the future and I'll still have no idea what's going on.
I don't know what's going on with the unequal border radii, but it seems that Safari doesn't handle very large box shadows well and will refuse to draw it if the spread is too large with a border radius. It does work if you also set a small blur radius (which shouldn't be noticeable except at the very extremes of the shadow):
#box-shadow-container {
box-shadow: 0 0 500px 5000px black;
^^^^^
}
However this will break Firefox. You should detect the Safari browser and only apply this style in Safari.
Play around with the blur radius and spread values to get something that works at the smallest size that you require.
I don't know the cause of the issue but you can fix it without making one of the border radius different by using calc:
.thing-with-box-shadow {
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
border-radius: 50%;
// makes the box shadow appear on Safari
border-bottom-right-radius: calc(50% + 0px);
}

Rounded corners to a textarea

Please see the attached image and jsfiddle: http://jsfiddle.net/chqy9dja/
A simple textarea, with rounded corners. Notice the problems on the right top and right bottom corners, where the scroll bar appears. The screenshot is taken with Chrome, but all other browsers share this bug.
I know this can be fixed with a jquery/javascript plugin, but I'm looking for a css-only approach.
I only need to add some padding between the scrollbar and the border.
Tried this, best solution so far: wrap the textarea in a div, style the div instead. Works, only minor problems appear when focusing on the element.
Tried to replace the border with an outline, and add outline-offset using css. Works great, problem is that outlines can not have rounded corners..
Any other ideas please? Style directly on the textarea, not a wrapping div.
<textarea id="a" class="a" />
.a {
width: 300px;
height: 300px;
border-radius: 10px;
border: 1px solid #000;
}
As you mentioned, outline can not have rounded corners. One option would be using a combination of border and box-shadow.
For instance you could give the element a transparent border and a proper box-shadow as follows:
Example Here
textarea {
width: 300px;
height: 300px;
border-radius: 10px;
box-shadow: 0 0 0 3px #000;
border: 5px solid transparent;
}

Multiple borders around a div with a transparent layer

I am trying to create a button with 3 layers of border around it with the middle layer showing the background of the containing div. Examples are worth a thousand words so here you go
http://jsfiddle.net/e5Sxt/2/
html
<div id="content">
<p>Generic Content</p>
<button class="button">Search</button>
</div>
css
#content{
width: 500px;
height: 500px;
background-color: black;
padding: 50px;
color: white;
}
button{
margin-top: 50px;
padding: 20px;
text-align: center;
background-color: #333;
box-shadow: 0 0 0 5px #666, 0 0 0 10px red, 0 0 0 15px #bbb;
border: none;
cursor: pointer;
}
The red box-shadow is where the black of the containing div should come through. If the box-shadow is set to transparent for this layer, the box-shadow under it shows through instead.
I have tried utilizing outlines, borders, and box-shadows to no avail so far. As of right now, I think I will have to wrap the button in another div with the outer border and a padding to show the background, but wanted to see if anyone could do this without adding another html element.
Thanks!
The answer depends on what browsers you need to support (and whether you'd be happy with a fall-back solution for older browsers).
There is a CSS feature called border-image, which, frankly, can do pretty much anything you could think of for a border. You could achieve this effect very easily using this style.
With border-image, you could simply specify a small image with your two colours and transparent middle section. Job done.
Learn more about border image here: http://css-tricks.com/understanding-border-image/
However... there is a big down-side: browser support. border-image is a relatively new addition to the CSS spec. Firefox and Chrome users should be okay, but IE users miss out -- this feature didn't even make it into IE10.
Full browser support details can be found here: http://caniuse.com/#search=border-image
If poor browser support for border-image is enough to kill that idea for you, then another viable answer would be to use :before or :after CSS selectors to create an pseudo-element sitting behind the main element. This would have a transparent background and be sized slightly larger than the main element and with it's own border. This will give the appearance of the triple border you're looking for.
Of course, you can only use this solution if you aren't already using :before and :after for something else.
Hope that gives you some ideas.
I think the only way to do this is by using a wrapper unfortunately. I'm not sure if it is possible to get the transparency through the button background.
Although, if you know the background color, you can use that in the border obviously, but of course this won't work for background gradients.
Here is a proposed jsFiddle showing knowing the color, and another using a wrapper:
http://jsfiddle.net/eD6xy/
HTML:
<div class="box one-div">(1 div, know color)</div>
<div class="two-div">
<div class="box">(2 divs, pure transparent)</div>
</div>
CSS:
/*
With one div, works fine with a constant color (#abc)
But with gradient, probably won't match up correctly
*/
.one-div {
margin: 15px 10px;
border: 5px solid blue;
box-shadow: 0 0 0 5px #abc,
0 0 0 10px red;
}
.two-div {
margin-top: 30px;
padding: 5px;
border: 5px solid red;
}
.two-div > .box {
border: 5px solid blue;
}

IE top left corner border diffrent

IE border drawing and chrome border drawing is different. Here is my problem css and screenshot (with zoom)
.test {
width: 10px;
height: 10px;
margin: 10px;
padding: 10px;
border-left: 1px solid green;
border-top: 1px solid red;
border-bottom: 1px solid black;
border-right: 1px solid blue;
}
Chrome:
IE:
Chrome and other browsers top left corner is green, but in IE red. This is making problem in my desing, how can I fix this problem?
jsFiddle: http://jsfiddle.net/yLdF4/
EDIT: Here is my real problem screenshot;
Little annoying 1 pixel.
I don't think either of the browsers is wrong in this case; they've just implemented the same standard slightly differently. The corner of the border in this sort of case is specified to be a diagonal line separating the two colours. Of course when it's only a single pixel wide, a diagonal line is fairly meaningless; the spec doesn't say to prefer the vertical or horizontal line, so there's room for slightly the different interpretations you see here.
If you really need to guarantee the colours in this case, I would suggest using :before and :after to create the borders on the sides separately from the main box.

Resources