Source code
Revision control
Copy as Markdown
Other Tools
---
root:
items:
- type: stacking-context
bounds: [0, 0, 1000, 1000]
items:
- type: border
bounds: [ 10, 10, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: groove
color: [ red, green, blue, yellow ]
radius: 0
- type: border
bounds: [ 120, 10, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: groove
color: [ red, green, blue, yellow ]
radius: 10
- type: border
bounds: [ 230, 10, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: groove
color: [ red, green, blue, yellow ]
radius: 20
- type: border
bounds: [ 340, 10, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: groove
color: [ red, green, blue, yellow ]
radius: 30
- type: border
bounds: [ 450, 10, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: groove
color: [ red, green, blue, yellow ]
radius: 40
- type: border
bounds: [ 560, 10, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: groove
color: [ red, green, blue, yellow ]
radius: 50
- type: border
bounds: [ 10, 120, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: ridge
color: [ red, green, blue, yellow ]
radius: 0
- type: border
bounds: [ 120, 120, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: ridge
color: [ red, green, blue, yellow ]
radius: 10
- type: border
bounds: [ 230, 120, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: ridge
color: [ red, green, blue, yellow ]
radius: 20
- type: border
bounds: [ 340, 120, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: ridge
color: [ red, green, blue, yellow ]
radius: 30
- type: border
bounds: [ 450, 120, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: ridge
color: [ red, green, blue, yellow ]
radius: 40
- type: border
bounds: [ 560, 120, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: ridge
color: [ red, green, blue, yellow ]
radius: 50
- type: border
bounds: [ 10, 230, 100, 100 ]
width: 1
border-type: normal
style: dashed
color: [ red, green, blue, black ]
radius: 16
- type: border
bounds: [ 120, 230, 100, 100 ]
width: 2
border-type: normal
style: dashed
color: [ red, green, blue, black ]
radius: 32
- type: border
bounds: [ 230, 230, 100, 100 ]
width: 3
border-type: normal
style: dashed
color: [ red, green, blue, black ]
radius: 32
- type: border
bounds: [ 340, 230, 100, 100 ]
width: 8
border-type: normal
style: dashed
color: [ red, green, blue, black ]
radius: 32
- type: border
bounds: [ 450, 230, 200, 100 ]
width: 4
border-type: normal
style: dotted
color: [ red, green, blue, black ]
radius: {
top-left: [32, 48],
top-right: [64, 32],
bottom-left: [10, 40],
bottom-right: [48, 48],
}
- type: border
bounds: [ 10, 340, 200, 200 ]
width: [4, 8, 16, 8]
border-type: normal
style: dashed
color: [ red, green, blue, black ]
radius: {
top-left: [32, 64],
top-right: [32, 32],
bottom-left: [64, 32],
bottom-right: [32, 32],
}
- type: border
bounds: [ 230, 340, 200, 200 ]
width: 4
border-type: normal
style: dashed
color: [ red, green, blue, black ]
radius: {
top-left: [64, 128],
top-right: [16, 32],
bottom-left: [40, 18],
bottom-right: [100, 50],
}
- type: border
bounds: [ 450, 340, 200, 100 ]
width: 8
border-type: normal
style: dotted
color: [ red, green, blue, black ]
radius: 32
- type: border
bounds: [ 450, 450, 200, 100 ]
width: [8, 8, 12, 12]
border-type: normal
style: dotted
color: [ red, green, blue, black ]
radius: 40