CSS, rounded corner colors on map

Hi all :melting_face:

In Perspective I have a flex container with a map component. The flex container is given a solid border with border radius to all corners (see the below figure).

If you look closely enough inside the orange circles in the below figure, you can see there is some white color in every corner. Does not look so good on a dark background.

Seems that there is some kind of background bleeding or something going on in every corner.
Anyone knows how to tweak the corners to have the same color as the rest of the border? :thinking:
I tried adding some lines with webkit in the theme css file, but I did not have any luck.
Is it possible to give individual colors to each corner, with CSS?

Dont you mean the map? can you even put a border on there? xD

No, I did mean the flex container. Well, tried both (container and map) to be honest, but it gave me the same result of not getting rid of the tiny white borders at the corners.

how did you get your map in darkmode ?Xd
its probably the map doing something weird

I don’t see the same when using a standard map against a black background. Could you provide more info on how you altered the Map appearance?
Screen Shot 2022-09-02 at 9.34.46 AM

1 Like

Had my map in dark mode by changing the default tile url to the following: https://server.arcgisonline.com/arcgis/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}, one of those mentioned in this post: Perspective Map "Theming" - Internet Tile Server Options.

Maybe by using the default map ( which is mostly white ) you don’t see the small white parts in the corners when rounding, or as @victordcq says, probably the map doing something weird.

I added an empty label above and beneath the map, and it seems that the white corners are gone ( see the below figure, implying that it’s the map doing something weird ).

If I remove the labels, it’s back to the white corners:

With the default map tile it’s hard to tell if there is some white corners “going on”:

You can change the color with .leaflet-container{background:color}
It seems that this is also the color for the raster though

1 Like