BorderRadius

BorderRadius

• top_left : bevy_ui::geometry::Val
• top_right : bevy_ui::geometry::Val
• bottom_left : bevy_ui::geometry::Val
• bottom_right : bevy_ui::geometry::Val

Description

Used to add rounded corners to a UI node. You can set a UI node to have uniformly rounded corners or specify different radii for each corner. If a given radius exceeds half the length of the smallest dimension between the node's height or width, the radius will calculated as half the smallest dimension.

Elliptical nodes are not supported yet. Percentage values are based on the node's smallest dimension, either width or height.

Example

#![allow(unused)]
fn main() {
use bevy_ecs::prelude::*;
use bevy_ui::prelude::*;
use bevy_color::palettes::basic::{BLUE};
fn setup_ui(mut commands: Commands) {
    commands.spawn((
        Node {
            width: Val::Px(100.),
            height: Val::Px(100.),
            border: UiRect::all(Val::Px(2.)),
            ..Default::default()
        },
        BackgroundColor(BLUE.into()),
        BorderRadius::new(
            // top left
            Val::Px(10.),
            // top right
            Val::Px(20.),
            // bottom right
            Val::Px(30.),
            // bottom left
            Val::Px(40.),
        ),
    ));
}
}

https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

Functions