Skip to main content

Border

Width​

TokenDescription
--ks-border-width-defaultThe default width for elements featuring a border
--ks-border-width-emphasizedFor highlighting important elements
border.json
tokens.css

_12
{
_12
"ks": {
_12
"border-width": {
_12
"default": {
_12
"value": "2px"
_12
},
_12
"emphasized": {
_12
"value": "3px"
_12
}
_12
}
_12
}
_12
}

Radius​

Control​

--ks-border-radius-control

For small horizontally stretched elements.

Card​

--ks-border-radius-card

For medium sized vertically stretched elements.

Surface​

--ks-border-radius-surface

For large screen covering elements.

Pill​

--ks-border-radius-pill

For small pill sized elements.

Circle​

--ks-border-radius-circle

For circular elements.

border.json
tokens.css

_41
{
_41
"ks": {
_41
"border-radius": {
_41
"control": {
_41
"value": "0px",
_41
"token": {
_41
"category": "Border Radius",
_41
"presenter": "BorderRadius"
_41
}
_41
},
_41
"card": {
_41
"value": "0px",
_41
"token": {
_41
"category": "Border Radius",
_41
"presenter": "BorderRadius"
_41
}
_41
},
_41
"surface": {
_41
"value": "0px",
_41
"token": {
_41
"category": "Border Radius",
_41
"presenter": "BorderRadius"
_41
}
_41
},
_41
"pill": {
_41
"value": "999px",
_41
"token": {
_41
"category": "Border Radius",
_41
"presenter": "BorderRadius"
_41
}
_41
},
_41
"circle": {
_41
"value": "50%",
_41
"token": {
_41
"category": "Border Radius",
_41
"presenter": "BorderRadius"
_41
}
_41
}
_41
}
_41
}
_41
}