border-radius in stacked bar graph chartist.js

I'm trying to add border-radius to my chartis stacked bar graph, but only to the first and last items.

I have tried to add a :first-child selector on my css application, but it doesn't work well.

Javascript:

var versions = [
  {
    data:[22],
    className: 'stacked-bars content-0'
  },
  {
    data:[103],
    className: 'stacked-bars content-1'
  },
  {
    data:[95],
    className: 'stacked-bars content-2'
  }
];

var chartistStack = new Chartist.Bar('#chartist-stack', {
      series : versions
    },{
      horizontalBars: true,
      stackBars: true,
      reverseData: true,
      height: '200px',
      width: '80%',
      chartPadding: {
        left: 200
      },
      axisX: {
        showGrid: false,
        showLabel: false
      },
      axisY: {
        showGrid: false,
        showLabel: false
      }
    }
);

CSS:

.content-0 {
    stroke: green;
    color: green;
}
.content-1 {
    stroke: red;
    color: red;
}
.content-2 {
    stroke: blue;
    color: blue;
}

.stacked-bars > .ct-bar {
    stroke-width: 20px;
}

https://codepen.io/luizzdea/pen/ErVwKd

In case you didn't find your answer: since this is an SVG, you can use this:

.stacked-bars:first-child,
.stacked-bars:last-child {
   stroke-linecap: round
}

References:

1) https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap

2) https://css-tricks.com/almanac/properties/s/stroke-linecap/