How can I make 'Picture' rounded and add border to it?

[thrashzone13]

Hi, I've put a Picture object inside a Bullet which I'm pushing to the MapPointSeries's bullets. Now I need to make the picture rounded and add border with color to it but It doesn't seem to be possible. Is there any way to handle this?

Here is part of my code

  let pointSeriers = chart.series.push(am5map.MapPointSeries.new(root, {}));

  pointSeriers.bullets.push(function (root, series, dataItem) {
    return am5.Bullet.new(root, {
      sprite: am5.Picture.new(root, {
        templateField: "pictureSettings",
        showTooltipOn: "click",
      }),
    });
  });

  pointSeriers.data.setAll([
    {
      properties: {
        name: "New York",
      },
      geometry: {
        type: "Point",
        coordinates: [-73.778137, 40.641312],
      },
      pictureSettings: {
        src: "https://picsum.photos/200/300",
        width: 50,
        height: 50,
        centerX: am5.p50,
        centerY: am5.p50,
      },
    },
  ]);

amCharts version: 5

[martynasma]

This can be done by using a masked Container in bullet:

pointSeriers.bullets.push(function (root, series, dataItem) {
  let container = am5.Container.new(root, {});

  container.children.push(am5.Picture.new(root, {
    templateField: "pictureSettings",
    showTooltipOn: "click",
  }));

  let circle = container.children.push(am5.Circle.new(root, {
    radius: 20,
    stroke: am5.color(0xff0000),
    strokeWidth: 3
  }));

  container.set("mask", circle);

  return am5.Bullet.new(root, {
    sprite: container
  });
});

[thrashzone13]

Thank you so much @martynasma. Saved my day!