Rounded outline/border around KPI Card (new) in .json theme

[Anonymous]

I would like to have rounded corners (4 px) as shown for KPI 3 and KPI 4. I can't get my head around how to implement it.

Here is the code I am working on:

"cardVisual": {
"*": {

"outline": [
{
"$id": "default",
"lineColor": {
"solid": {
"color": "#B3B0AD"
}
},
"show": true,
"roundEdge": 4,
"weight": 1,
"transparency": 0
}
],
"padding": [
{
"top": 0,
"left": 0,
"right": 0,
"bottom": 0
}
],
"spacing": [
{
"$id": "default",
"verticalSpacing": 0
}
],
"fillCustom": [
{
"$id": "default",
"fillColor": {
"solid": {
"color": "#FFFFFF"
}
}
}
],
"shape": [
{
"$id": "default",
"roundEdge": 4,
"rectangleRoundedCurve": 4
}
],

"layout": [
{
"orientation": 2,
"customizePadding": false
}
],

"background": [
{
"show": false
}
],

"label": [
{
"$id": "default",
"fontColor": {
"solid": {
"color": "#0B1128"
}
},
"fontSize": 10,
"horizontalAlignment": "center"
}
],
"value": [
{
"$id": "default",
"fontColor": {
"solid": {
"color": "#0B1128"
}
},
"bold": true,
"italic": false,
"underline": false,
"fontSize": 20,
"horizontalAlignment": "center"
}
],
"border": [
{
"show": false
}
]
}
}

Thanks in advance

[hnguy71 · Accepted solution]

Hi @Anonymous 

try this:

 "cardVisual": {
      "*": {
        "shapeCustomRectangle": [
          {
            "$id": "default",
            "tileShape": "rectangleRounded",
            "rectangleRoundedCurveCustomStyle": true,
            "rectangleRoundedCurveLeftTop": 6,
            "rectangleRoundedCurveRightTop": 6,
            "rectangleRoundedCurveLeftBottom": 6,
            "rectangleRoundedCurveRightBottom": 6
          }
        ],
        "outline": [
          {
            "$id": "default",
            "lineColor": {
              "solid": {
                "color": "#B3B0AD"
              }
            },
            "show": true,
            "weight": 1
          }
        ],
        "border": [
          {
            "color": {
              "solid": {
                "color": "#FFFFFF"
              }
            },
            "show": true,
            "radius": 4
          }
        ]
      }
    }
  }

The result:

[crispybc]

Thanks, seems the "$id": "default"  is necesary for shapeCustomRectangle which is missing from a lot of auto generation tools

[Anonymous]

YES!!!! THANK YOU so much 🙏

[PhilipTreacy]

@Anonymous 

Try

"border": [{
                "show": true,
                "radius": 4,
                "color": { "solid": { "color": "#CCCCCC" } }
            }],

regards

Phil

[Anonymous]

This works to make a border on the entire visual, not the cards themselves. But thank you so much.