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],
shape-top-left: 2,
shape-top-right: -1.5,
shape-bottom-left: 0,
shape-bottom-right: +Inf,
}
- 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],
shape-top-left: 2,
shape-top-right: -1.5,
shape-bottom-left: 0,
shape-bottom-right: +Inf,
}
- 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],
shape-top-left: 2,
shape-top-right: -1.5,
shape-bottom-left: 0,
shape-bottom-right: +Inf,
}
- 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],
shape-top-left: 2,
shape-top-right: -1.5,
shape-bottom-left: 0,
shape-bottom-right: +Inf,
}
- 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],
shape-top-left: 2,
shape-top-right: -1.5,
shape-bottom-left: 0,
shape-bottom-right: +Inf,
}
- 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, 0.5]
- type: border
bounds: [ 340, 120, 100, 100 ]
width: 10
border-type: normal
style: outset
color: [ red, green, blue, black ]
radius: [20, -0.3]
- type: border
bounds: [ 450, 120, 100, 100 ]
width: 10
border-type: normal
style: outset
color: [ red, green, blue, black ]
radius: [35, 2.2]
- type: border
bounds: [ 560, 120, 100, 100 ]
width: 10
border-type: normal
style: outset
color: [ red, green, blue, black ]
radius: [50, -2.6]
- 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],
shape-top-left: -1.2,
shape-top-right: 4.0,
shape-bottom-left: -Inf,
shape-bottom-right: 8.0,
}
- 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],
shape-top-left: -1.2,
shape-top-right: 4.0,
shape-bottom-left: -Inf,
shape-bottom-right: 8.0,
}
- 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],
shape-top-left: -1.2,
shape-top-right: 4.0,
shape-bottom-left: -Inf,
shape-bottom-right: 8.0,
}
- 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],
shape-top-left: -1.2,
shape-top-right: 4.0,
shape-bottom-left: -Inf,
shape-bottom-right: 8.0,
}
- 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],
shape-top-left: -1.2,
shape-top-right: 4.0,
shape-bottom-left: -Inf,
shape-bottom-right: 8.0,
}
- 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],
shape-top-left: -1.2,
shape-top-right: 4.0,
shape-bottom-left: -Inf,
shape-bottom-right: 8.0,
}
- 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],
shape-top-left: -1.2,
shape-top-right: 4.0,
shape-bottom-left: -Inf,
shape-bottom-right: 8.0,
}
- 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],
shape-top-left: -1.2,
shape-top-right: 4.0,
shape-bottom-left: -Inf,
shape-bottom-right: 8.0,
}
- 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],
shape-top-left: -1.2,
shape-top-right: 4.0,
shape-bottom-left: -Inf,
shape-bottom-right: 8.0,
}
- 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],
shape-top-left: -1.2,
shape-top-right: 4.0,
shape-bottom-left: -Inf,
shape-bottom-right: 8.0,
}
- 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],
shape-top-left: -1.2,
shape-top-right: 4.0,
shape-bottom-left: -Inf,
shape-bottom-right: 8.0,
}
- 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],
shape-top-left: -1.2,
shape-top-right: 4.0,
shape-bottom-left: -Inf,
shape-bottom-right: 8.0,
}
- type: border
bounds: [ 10, 450, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: solid
color: [ red, green, blue, black ]
radius: [0, -Inf]
- type: border
bounds: [ 120, 450, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: solid
color: [ red, green, blue, black ]
radius: [10, -Inf]
- type: border
bounds: [ 230, 450, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: solid
color: [ red, green, blue, black ]
radius: [20, -Inf]
- type: border
bounds: [ 340, 450, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: solid
color: [ red, green, blue, black ]
radius: [30, -2.3]
- type: border
bounds: [ 450, 450, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: solid
color: [ red, green, blue, black ]
radius: [40, -2.3]
- type: border
bounds: [ 560, 450, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: solid
color: [ red, green, blue, black ]
radius: [50, -2.3]
- type: border
bounds: [ 10, 560, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: double
color: [ red, green, blue, black ]
radius: [0, -2.3]
- type: border
bounds: [ 120, 560, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: double
color: [ red, green, blue, black ]
radius: [10, -2.3]
- type: border
bounds: [ 230, 560, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: double
color: [ red, green, blue, black ]
radius: [20, -2.3]
- type: border
bounds: [ 340, 560, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: double
color: [ red, green, blue, black ]
radius: [30, -2.3]
- type: border
bounds: [ 450, 560, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: double
color: [ red, green, blue, black ]
radius: [40, -2.3]
- type: border
bounds: [ 560, 560, 100, 100 ]
width: [ 20, 20, 20, 20 ]
border-type: normal
style: double
color: [ red, green, blue, black ]
radius: [50, -2.3]