Right Border Not Displaying on Google Chrome

Right border not displaying on google chrome

Test case: Included so this question still makes sense after the content at the given URL changes:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html><head><style type="text/css">
div {
  float: left;
  clear: left;
  margin: 3px;
}
span {
  border: 1px solid;
}
</style></head><body>

<!-- does not show right border -->
<div><span>With trailing space, no width </span></div> 

<!-- does show right border -->
<div><span>No trailing space, no width</span></div>
<div style="width: 40ex;"><span>With trailing space, has width </span></div>
<div style="width: 40ex;"><span>No trailing space, has width</span></div>

</body></html>

Verified in Google Chrome 4.0.266.0 (Official Build 33992) with WebKit 532.6.

Border in Chrome not visible

In Chrome, all CSS pixel values get truncated, so decimals won't work.
This means that in Chrome, 0.5px will get truncated to 0px.

The desired effect can however be accomplished using CSS's box-shadow

Fiddle:
http://jsfiddle.net/x5ook88d/1/

-webkit-box-shadow: 0px 0px 0px 3.5px rgba(35, 199, 255, 0.5);
-moz-box-shadow: 0px 0px 0px 3.5px rgba(35, 199, 255, 0.5);
box-shadow: 0px 0px 0px 3.5px rgba(35, 199, 255, 0.5);

Chrome isn't displaying borders (sometimes)

I believe you are hitting http://code.google.com/p/chromium/issues/detail?id=32702

EDIT:

The bug has been fixed, verified against Chromium src@139014! Should go live in Chrome 21.

Table Border property not showing up in google chrome version 61 for mac

When I try this in Chrome the code seems to work (produces a single red border around the table). However, try changing your doctype to <!DOCTYPE html> rather than the transitional doctype. Also try breaking the style declaration into individual properties, for example;

table {
border-width:3px;
border-style:solid;
border-color:red;
}

CSS border-left/right not displaying properly

The exact rendering of border corners differ between browsers.

With thick borders, the browser tries to make a diagonal boundary between the borders. The pixels right in the corner can get the color from one of the borders:

******************
+*****************
++****************
+++***************
++++
++++
++++

or the other border:

+*****************
++****************
+++***************
++++**************
++++
++++
++++

Different browsers will use either of those two approaches, but differently on all four corners of the element. I once compared what different browsers use, and it almost seemed like each browser vendor went out of their way to pick an approach that no other browser used.

In your case Firefox and Chrome happen to use the horizontal border color for the boundary on the bottom left corner.

To get the side borders to go on the outside, i.e.:

++++******************
++++******************
++++******************
++++******************
++++
++++
++++
++++

you would use one element inside another, and set the vertical borders on the outer element and the horizontal borders on the inner element.

Example (with exaggerated border widths just to show the effect):

.outer { border: 10px #0c0; border-style: none solid; }.inner { border: 10px #ccc; border-style: solid none; }

<div class="outer"><div class="inner">Demo</div></div>

HTML in Chrome shows an additional border that not shown in IE

UPDATE

Although OP's problem may seem specialized, this could apply to anyone that has experienced a stubborn border on a table and can't seem to get rid of it.

Add the following to the table:

Table {
    border-collapse: separate;
    border-spacing: 0;
    empty-cells: hide;
}

This is the result: http://jsfiddle.net/zer00ne/0Leqah5r

Try:

.ArrowCell {
    border-top: 1px solid red;
    border-left:  1px solid red;
    border-bottom:  1px solid red;
    border-right: 0 solid transparent;
}

I don't see that extra line in Chrome PC, but when I inspect it with devtools, computed style for .ArrowCell is reported as 0.8px solid black; so I'm guessing that changing it's color to transparent should work.

I just thought of another possibility to your issue. Double check and see if your rowspans might be conflicting by crossing into each other.

Another possible fix is to change border-collapse: separate; to border-collapse: collapse; and maybe border-spacing: 0 as well.

chrome css problem: border (right) around link not displayed

You have set the containing DIV at a fixed width of 250px. This is cutting off the edges. Also, you should add display:inline-block; to your CSS link class. This will make your link a block element while keeping it inline. It will also apply the padding you have asigned properly.

See updated link here http://jsfiddle.net/sV8js/12/

Dan

Right Border Not Displaying on Google Chrome