CSS Border rendering

Question

I like to know if is possible to specify the border drawing style (not border-style) with CSS (I need that works at least on webkit).

Answer 1

You could use CSS pseudo-content to achieve a fake border, like this:

.red-mark:before {
  content: '';
  display:block;
  width: 15px;
  position: absolute;
  top: -15px;
  left: -15px;
  bottom: -15px;
  background: red;
}

See: http://jsfiddle.net/MnPka/1/

The minus positions are because 0 starts within the border. You may be able to change this behaviour by setting box-sizing though support for that isn't that great yet - http://caniuse.com/#search=box-sizing

Answer 2

The :before solution offered by Josh Davenport is probably the best answer here, but just for completeness, I should also mention border-image.

border-image is a relatively new CSS feature that allows you to specify an image for each of the border edges and corners. This would enable you to design your border exactly as you want it.

Your example would be a pretty trivial case for it; as I said the other answer is probably better for you; but for more complex cases, it's a great little feature to have in your toolbox.

You can read more about it here at the MDN.

The one thing to note (as mentioned on the MDN link above) is browser compatibility. It will work in most current browsers, but not in any current IE versions (IE10 or earlier), and may have issues in older versions of other browsers. However, you specified you were particularly looking for a Webkit solution, and it has been supported in webkit browsers for ages, so it should be okay.