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: [ 1, 1, 1, 1 ]
border-type: normal
style: solid
color: [ red, green, blue, black ]
radius: {
top-left: [20, 20],
top-right: [10, 10],
bottom-left: [25, 25],
bottom-right: [0, 0],
}
- type: border
bounds: [ 120, 10, 100, 100 ]
width: [ 2, 2, 2, 2 ]
border-type: normal
style: solid
color: [ red, green, blue, black ]
radius: {
top-left: [20, 20],
top-right: [10, 10],
bottom-left: [25, 25],
bottom-right: [0, 0],
}
- type: border
bounds: [ 230, 10, 100, 100 ]
width: [ 3, 3, 3, 3 ]
border-type: normal
style: solid
color: [ red, green, blue, black ]
radius: {
top-left: [20, 20],
top-right: [10, 10],
bottom-left: [25, 25],
bottom-right: [0, 0],
}
- type: border
bounds: [ 340, 10, 100, 100 ]
width: [ 5, 5, 5, 5 ]
border-type: normal
style: solid
color: [ red, green, blue, black ]
radius: {
top-left: [20, 20],
top-right: [10, 10],
bottom-left: [25, 25],
bottom-right: [0, 0],
}
- type: border
bounds: [ 450, 10, 100, 100 ]
width: [ 5, 5, 5, 5 ]
border-type: normal
style: double
color: [ red, green, blue, black ]
radius: {
top-left: [20, 20],
top-right: [10, 10],
bottom-left: [25, 25],
bottom-right: [0, 0],
}
- type: border
bounds: [ 560, 10, 100, 100 ]
width: [ 10, 10, 10, 10 ]
border-type: normal
style: double
color: [ red, green, blue, black ]
radius: {
top-left: [20, 20],
top-right: [10, 10],
bottom-left: [25, 25],
bottom-right: [0, 0],
}
- type: border
bounds: [ 10, 120, 100, 100 ]
width: 10
border-type: normal
style: inset
color: [ red, green, blue, black ]
- type: border
bounds: [ 120, 120, 100, 100 ]
width: 10
border-type: normal
style: outset
color: [ red, green, blue, black ]
- type: border
bounds: [ 230, 120, 100, 100 ]
width: 10
border-type: normal
style: inset
color: [ red, green, blue, black ]
radius: 10
- type: border
bounds: [ 340, 120, 100, 100 ]
width: 10
border-type: normal
style: outset
color: [ red, green, blue, black ]
radius: 20
- type: border
bounds: [ 450, 120, 100, 100 ]
width: 10
border-type: normal
style: outset
color: [ red, green, blue, black ]
radius: 35
- type: border
bounds: [ 560, 120, 100, 100 ]
width: 10
border-type: normal
style: outset
color: [ red, green, blue, black ]
radius: 50
- type: border
bounds: [ 10, 230, 100, 100 ]
width: [ 1, 1, 1, 1 ]
border-type: normal
style: solid
color: [ red, green, blue, black ]
radius: {
top-left: [20, 40],
top-right: [30, 10],
bottom-left: [21, 7],
bottom-right: [0, 5],
}
- type: border
bounds: [ 120, 230, 100, 100 ]
width: [ 2, 2, 2, 2 ]
border-type: normal
style: solid
color: [ red, green, blue, black ]
radius: {
top-left: [20, 40],
top-right: [30, 10],
bottom-left: [21, 7],
bottom-right: [0, 5],
}
- type: border
bounds: [ 230, 230, 100, 100 ]
width: [ 3, 3, 3, 3 ]
border-type: normal
style: solid
color: [ red, green, blue, black ]
radius: {
top-left: [20, 40],
top-right: [30, 10],
bottom-left: [21, 7],
bottom-right: [0, 5],
}
- type: border
bounds: [ 340, 230, 100, 100 ]
width: [ 5, 5, 5, 5 ]
border-type: normal
style: solid
color: [ red, green, blue, black ]
radius: {
top-left: [20, 40],
top-right: [30, 10],
bottom-left: [21, 7],
bottom-right: [0, 5],
}
- type: border
bounds: [ 450, 230, 100, 100 ]
width: [ 5, 5, 5, 5 ]
border-type: normal
style: double
color: [ red, green, blue, black ]
radius: {
top-left: [20, 40],
top-right: [30, 10],
bottom-left: [21, 7],
bottom-right: [0, 5],
}
- type: border
bounds: [ 560, 230, 100, 100 ]
width: [ 10, 10, 10, 10 ]
border-type: normal
style: double
color: [ red, green, blue, black ]
radius: {
top-left: [20, 40],
top-right: [30, 10],
bottom-left: [21, 7],
bottom-right: [0, 5],
}
- type: border
bounds: [ 10, 340, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: solid
color: [ red, green, blue, black ]
radius: {
top-left: [20, 40],
top-right: [30, 10],
bottom-left: [21, 7],
bottom-right: [0, 5],
}
- type: border
bounds: [ 120, 340, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: solid
color: [ red, green, blue, black ]
radius: {
top-left: [20, 40],
top-right: [30, 10],
bottom-left: [21, 7],
bottom-right: [0, 5],
}
- type: border
bounds: [ 230, 340, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: solid
color: [ red, green, blue, black ]
radius: {
top-left: [20, 40],
top-right: [30, 10],
bottom-left: [21, 7],
bottom-right: [0, 5],
}
- type: border
bounds: [ 340, 340, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: solid
color: [ red, green, blue, black ]
radius: {
top-left: [20, 40],
top-right: [30, 10],
bottom-left: [21, 7],
bottom-right: [0, 5],
}
- type: border
bounds: [ 450, 340, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: double
color: [ red, green, blue, black ]
radius: {
top-left: [20, 40],
top-right: [30, 10],
bottom-left: [21, 7],
bottom-right: [0, 5],
}
- type: border
bounds: [ 560, 340, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: double
color: [ red, green, blue, black ]
radius: {
top-left: [20, 40],
top-right: [30, 10],
bottom-left: [21, 7],
bottom-right: [0, 5],
}
- type: border
bounds: [ 10, 450, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: solid
color: [ red, green, blue, black ]
radius: 0
- type: border
bounds: [ 120, 450, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: solid
color: [ red, green, blue, black ]
radius: 10
- type: border
bounds: [ 230, 450, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: solid
color: [ red, green, blue, black ]
radius: 20
- type: border
bounds: [ 340, 450, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: solid
color: [ red, green, blue, black ]
radius: 30
- type: border
bounds: [ 450, 450, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: solid
color: [ red, green, blue, black ]
radius: 40
- type: border
bounds: [ 560, 450, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: solid
color: [ red, green, blue, black ]
radius: 50
- type: border
bounds: [ 10, 560, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: double
color: [ red, green, blue, black ]
radius: 0
- type: border
bounds: [ 120, 560, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: double
color: [ red, green, blue, black ]
radius: 10
- type: border
bounds: [ 230, 560, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: double
color: [ red, green, blue, black ]
radius: 20
- type: border
bounds: [ 340, 560, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: double
color: [ red, green, blue, black ]
radius: 30
- type: border
bounds: [ 450, 560, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: double
color: [ red, green, blue, black ]
radius: 40
- type: border
bounds: [ 560, 560, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: double
color: [ red, green, blue, black ]
radius: 50