I am using the latest version of OpenLayers to draw some features within a map rendering data from GeoJSON-files. Within each of these files I have a FeatureCollection containing a couple of LineString-features.

So far the following style is applied, which works fine and draws each feature as a thin dark line:

return new Style({
  stroke: new Stroke({
    color: '#333333',
    width: 1

I know, that I can not use Fill to style LineString-features (if I am right). However, I really want to style these lines with two colors using a inner line (1px;red) and a border/stroke around this inner line (1px;blue).

Is there any possibility to accomplish this?

A first solution would be to copy the features drawing the lower ones blue and 3px wide and the upper ones red and 1px wide - but this would also double the amount of features.

  • 1
    Use two styles for the features like you wrote. Draw 3 pixel wide blue line first and 1 pixel wide red over it.You do need to copy the features.
    – user30184
    Sep 15, 2018 at 18:31

1 Answer 1


As recommanded by @user30184, you should double the style like below. You may need to adapt width to your liking.

return [
  new Style({
    stroke: new Stroke({
      color: 'blue',
      width: 4
  new Style({
    stroke: new Stroke({
      color: 'red',
      width: 2
  • Thank you. I didn't know that I could pass styles as an array.
    – pzaenger
    Sep 20, 2018 at 13:21
  • Freakin' awesome! This helps in a lot of situations in OpenLayers styling. I haven't found anywhere in the documentation that specifically mentions this is possible. Sep 18, 2021 at 5:01
  • Quite terse but explained in the API e.g in openlayers.org/en/latest/apidoc/… style mentioned it accepts an module:ol/style/Style~StyleLike | null | undefined Then, going to ol/style/Style~StyleLike openlayers.org/en/latest/apidoc/… it says it's "A Style, an array of Style, or a StyleFunction." and a StyleFunction should "return a module:ol/style/Style or an array of them" e.g openlayers.org/en/latest/apidoc/… Clearly succinct...
    – ThomasG77
    Sep 18, 2021 at 14:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.