# CSS, rounded corner colors on map

**URL:** <https://forum.inductiveautomation.com/t/css-rounded-corner-colors-on-map/63710>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [September 2, 2022, 10:25am UTC](https://forum.inductiveautomation.com/t/css-rounded-corner-colors-on-map/63710 "2022-09-02T10:25:18Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![andreas](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/andreas/32/18981_2.png) [@andreas](https://forum.inductiveautomation.com/u/andreas)\
**Post date:** [September 2, 2022, 10:25am UTC](https://forum.inductiveautomation.com/t/css-rounded-corner-colors-on-map/63710/1 "2022-09-02T10:25:18Z")

</div>

Hi all 🫠

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? 🤔  
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?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/5/65af20090a08a17be1103bf7dfaf544c7ba8ebe8.jpeg)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 2, 2022, 12:38pm UTC](https://forum.inductiveautomation.com/t/css-rounded-corner-colors-on-map/63710/2 "2022-09-02T12:38:18Z")

</div>

> [@andreas](#):
>
> The flex container is given a solid border with border radius to all corners (see the below figure)

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

---

<div class="post-metadata">

**Author:** ![andreas](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/andreas/32/18981_2.png) [@andreas](https://forum.inductiveautomation.com/u/andreas)\
**Post date:** [September 2, 2022, 12:46pm UTC](https://forum.inductiveautomation.com/t/css-rounded-corner-colors-on-map/63710/3 "2022-09-02T12:46:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 2, 2022, 12:48pm UTC](https://forum.inductiveautomation.com/t/css-rounded-corner-colors-on-map/63710/4 "2022-09-02T12:48:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [September 2, 2022, 4:35pm UTC](https://forum.inductiveautomation.com/t/css-rounded-corner-colors-on-map/63710/5 "2022-09-02T16:35:15Z")

</div>

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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/1/813a6789a97ab1354beb5f9eb44a237628f4de5c.png)

---

<div class="post-metadata">

**Author:** ![andreas](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/andreas/32/18981_2.png) [@andreas](https://forum.inductiveautomation.com/u/andreas)\
**Post date:** [September 5, 2022, 6:28am UTC](https://forum.inductiveautomation.com/t/css-rounded-corner-colors-on-map/63710/6 "2022-09-05T06:28:38Z")

</div>

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}](https://server.arcgisonline.com/arcgis/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/%7Bz%7D/%7By%7D/%7Bx%7D), one of those mentioned in this post: [Perspective Map "Theming" - Internet Tile Server Options](https://forum.inductiveautomation.com/t/perspective-map-theming-internet-tile-server-options/40164).

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 ).

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/a/8a530bf616d908d7b5171fc1f27fe71e0acc41a6.jpeg)

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

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/3/a30c0054a3ccfbe543b5d458b8f0f0ad15d2432b.jpeg)

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

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/8/f819e6c2a4ef09203d557ac4196f2827b4d304e5.png)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 5, 2022, 8:35am UTC](https://forum.inductiveautomation.com/t/css-rounded-corner-colors-on-map/63710/7 "2022-09-05T08:35:32Z")

</div>

You can change the color with `.leaflet-container{background:color}`  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/e/7eaaf7d9473bacbc4315b617e859c4130d7520bd.png)  
It seems that this is also the color for the raster though
