Webkit + border-radius + border-left-width + border-left-color = </3

HTML & CSS
1

Good day to all,

So for starters, I have been doing a lot of searching and (re)searching, on a website many of you may know as Google, I’ve also looked on Stackoverflow, CSS Tricks, and here on Sitepoint… to be returned with nothing related. In fact the most common issue I find is in regards to border radius and developers unaware of background-clip: padding-box.

Anyways, I am currently dealing with an issue that seems to occur only in webkit and not Firefox, though I have neglected to test in ahem… IE… ahem. Applying a border radius to a box, a border to that box, then declaring that one of the border sides – lets say the left border – be wider/thicker than the rest. Oh and and on top of that lets throw a splash of color on that wider border.

So you end up with something like this:

CSS:


input[type=text] {
  border:1px solid #999;
  border-radius:5px;
  height:15px;
  padding:4px;
  width:400px;
}
.error {
  border-left:5px solid #f00;
}

Markup:


<input class="error" type="text>

What webkit likes to do (yes, both safari and chrome), is add a strip of that lovely splash of color to the center of the top and bottom borders of the element. I have done testing of multiple scenarios to discover what styles affect this issue and the two styles that have the most influence seem to be the border-width and width of the element. Adjusting them can increase or decrease the width of that odd little strip, depending on your styles they may even eliminate that strip.

Here is a JSfiddle I’ve created using multiple test cases that will show you both my styles and markup, and the resulting output (I hope it is not an issue linking to code off of sitepoint, couldn’t find any rules about that):
http://jsfiddle.net/kGST9/6/

There you will find many test cases to best exemplify the issue at hand. View this fiddle in both a webkit browser and Firefox to see the difference if you have not seen this before. Also, you’ll notice that this bug is not specific to anyone html element, as I have applied the styles to input, paragraph, and div tags to ensure that it wasn’t element specific. There are various width, height, border width, border radius, and border width alignment combinations, to identify many scenarios.

I’m pretty confident someone has come across this in their work at one point in time, and just hoping for some assistance with this issue as I cannot even find any documentation on this bug.

Best regards,

Patrick

2

Here is an updated jsfiddle with more test cases added: http://jsfiddle.net/kGST9/7/

3

Interesting bug. I couldn’t see an immediate fix for it apart from as you say increasing the dimensions.

I’m surprised I haven’t run into it before but then I guess it’s a little odd to have border radius and different coloured borders.

I’ll have to have a play around with it some more but it doesn’t look fixable.

You should file a webkit bug report on it as I can’t see it mentioned anywhere else either.

4

Actually I already have, well I went to Webkit’s webside and created an account in their bugzilla system. Someone has already filed this bug back on Nov. 11, 2011, so I commented on the bug and added my JSfiddle test cases to the ticket. At the moment there is no one assigned to the ticket yet. here is a link to that ticket: https://bugs.webkit.org/show_bug.cgi?id=72120.

I have a few more test cases in my mind that I’m going to add to the JSfiddle soon, and I’ll update this thread with the new link once I do.

5

JSfile updated with even more test cases (31 total styling scenarios): http://jsfiddle.net/kGST9/8/