Constant freya_elements::elements::rect::border

pub const border: (&'static str, Option<&'static str>, bool);

Specify borders for an element.

The border attribute follows this syntax: border: <width(s)> <alignment> <fill>

Width specification follows CSS-like patterns:

• Single value: Applied to all sides
• Two values: First for top/bottom, second for left/right
• Three values: First for top, second for left/right, third for bottom
• Four values: Top, right, bottom, left (clockwise from top)

Alignment must be one of:

• inner: Border drawn inside the element bounds
• outer: Border drawn outside the element bounds
• center (default): Border centered on the element bounds

Border alignment determines how the border is positioned relative to the element’s edge. Alignment can be inner, outer, or center.

Note: Borders exist outside the layout system, which means they will be drawn underneath child elements and may overlap with adjacent elements. Add appropriate padding or margin to prevent border overlap with other content.

Examples

A solid, black border with a width of 2 pixels on every side. Border is aligned to the inside of the rect’s edge.

fn app() -> Element {
    rsx!(
        rect {
            border: "2 inner black",
        }
    )
}

A solid, red border with different widths on each side. Border is aligned to the center of the rect’s edge.

fn app() -> Element {
    rsx!(
        rect {
            border: "1 2 3 4 center red",
        }
    )
}

Borders can take any valid fill type, including gradients.

fn app() -> Element {
    rsx!(
        rect {
            border: "1 inner linear-gradient(red, green, yellow 40%, blue)",
        }
    )
}

Similarly to the shadow attribute, multiple borders can be drawn on a single element when separated by a comma. Borders specified later in the list are drawn on top of previous ones.

fn app() -> Element {
    rsx!(
        rect {
            border: "6 outer red, 5 outer orange, 4 outer yellow, 3 outer green, 2 outer blue, 1 outer purple",
        }
    )
}