Skip to content

Add BorderRadius to Node #21781

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Nov 14, 2025
Merged

Add BorderRadius to Node #21781

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
ad00482
* Remove the `Component` derive from `BorderRadius`.
ickshonpe Nov 8, 2025
aea707d
Merge branch 'main' into node-border-radius
ickshonpe Nov 9, 2025
8b82e7d
Fixed examples
ickshonpe Nov 9, 2025
ee3cc98
Fixed feathers
ickshonpe Nov 9, 2025
bab0f84
Added migration guide
ickshonpe Nov 9, 2025
84fec13
Fixed migration guide's title
ickshonpe Nov 9, 2025
1c916bf
Added trailing newline to migration guide.
ickshonpe Nov 9, 2025
b4b3b2b
Fixed slider function
ickshonpe Nov 9, 2025
6042e4e
Fixed feathers button constructor
ickshonpe Nov 9, 2025
be9a962
Updated doc comments
ickshonpe Nov 9, 2025
f19c5fd
Merge branch 'main' into node-border-radius
ickshonpe Nov 11, 2025
00fe771
fixed example
ickshonpe Nov 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion crates/bevy_feathers/src/controls/button.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,14 +74,14 @@ pub fn button<C: SpawnableList<ChildOf> + Send + Sync + 'static, B: Bundle>(
align_items: AlignItems::Center,
padding: UiRect::axes(Val::Px(8.0), Val::Px(0.)),
flex_grow: 1.0,
border_radius: props.corners.to_border_radius(4.0),
..Default::default()
},
Button,
props.variant,
Hovered::default(),
EntityCursor::System(bevy_window::SystemCursorIcon::Pointer),
TabIndex(0),
props.corners.to_border_radius(4.0),
ThemeBackgroundColor(tokens::BUTTON_BG),
ThemeFontColor(tokens::BUTTON_TEXT),
InheritableFont {
Expand Down
2 changes: 1 addition & 1 deletion crates/bevy_feathers/src/controls/checkbox.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,10 +88,10 @@ pub fn checkbox<C: SpawnableList<ChildOf> + Send + Sync + 'static, B: Bundle>(
width: size::CHECKBOX_SIZE,
height: size::CHECKBOX_SIZE,
border: UiRect::all(Val::Px(2.0)),
border_radius: BorderRadius::all(Val::Px(4.0)),
..Default::default()
},
CheckboxOutline,
BorderRadius::all(Val::Px(4.0)),
ThemeBackgroundColor(tokens::CHECKBOX_BG),
ThemeBorderColor(tokens::CHECKBOX_BORDER),
children![(
Expand Down
4 changes: 2 additions & 2 deletions crates/bevy_feathers/src/controls/color_plane.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,12 +136,12 @@ pub fn color_plane<B: Bundle>(plane: ColorPlane, overrides: B) -> impl Bundle {
min_height: px(100.0),
align_self: AlignSelf::Stretch,
padding: UiRect::all(px(4)),
border_radius: BorderRadius::all(px(5)),
..Default::default()
},
plane,
ColorPlaneValue::default(),
ThemeBackgroundColor(tokens::COLOR_PLANE_BG),
BorderRadius::all(px(5)),
EntityCursor::System(bevy_window::SystemCursorIcon::Crosshair),
overrides,
children![(
Expand All @@ -159,10 +159,10 @@ pub fn color_plane<B: Bundle>(plane: ColorPlane, overrides: B) -> impl Bundle {
width: px(10),
height: px(10),
border: UiRect::all(Val::Px(1.0)),
border_radius: BorderRadius::MAX,
..Default::default()
},
ColorPlaneThumb,
BorderRadius::MAX,
BorderColor::all(palette::WHITE),
Outline {
width: Val::Px(1.),
Expand Down
8 changes: 4 additions & 4 deletions crates/bevy_feathers/src/controls/color_slider.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,9 +215,9 @@ pub fn color_slider<B: Bundle>(props: ColorSliderProps, overrides: B) -> impl Bu
right: Val::Px(0.),
top: Val::Px(TRACK_PADDING),
bottom: Val::Px(TRACK_PADDING),
border_radius: RoundedCorners::All.to_border_radius(TRACK_RADIUS),
..Default::default()
},
RoundedCorners::All.to_border_radius(TRACK_RADIUS),
ColorSliderTrack,
AlphaPattern,
MaterialNode::<AlphaPatternMaterial>(Handle::default()),
Expand All @@ -226,9 +226,9 @@ pub fn color_slider<B: Bundle>(props: ColorSliderProps, overrides: B) -> impl Bu
(
Node {
width: Val::Px(THUMB_SIZE * 0.5),
border_radius: RoundedCorners::Left.to_border_radius(TRACK_RADIUS),
..Default::default()
},
RoundedCorners::Left.to_border_radius(TRACK_RADIUS),
BackgroundColor(palette::X_AXIS),
),
// Track with gradient
Expand All @@ -255,11 +255,11 @@ pub fn color_slider<B: Bundle>(props: ColorSliderProps, overrides: B) -> impl Bu
width: Val::Px(THUMB_SIZE),
height: Val::Px(THUMB_SIZE),
border: UiRect::all(Val::Px(2.0)),
border_radius: BorderRadius::MAX,
..Default::default()
},
SliderThumb,
ColorSliderThumb,
BorderRadius::MAX,
BorderColor::all(palette::WHITE),
Outline {
width: Val::Px(1.),
Expand All @@ -276,9 +276,9 @@ pub fn color_slider<B: Bundle>(props: ColorSliderProps, overrides: B) -> impl Bu
(
Node {
width: Val::Px(THUMB_SIZE * 0.5),
border_radius: RoundedCorners::Right.to_border_radius(TRACK_RADIUS),
..Default::default()
},
RoundedCorners::Right.to_border_radius(TRACK_RADIUS),
BackgroundColor(palette::Z_AXIS),
),
]
Expand Down
6 changes: 3 additions & 3 deletions crates/bevy_feathers/src/controls/color_swatch.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,13 +48,13 @@ pub fn color_swatch<B: Bundle>(overrides: B) -> impl Bundle {
Node {
height: size::ROW_HEIGHT,
min_width: size::ROW_HEIGHT,
border_radius: BorderRadius::all(Val::Px(5.0)),
..Default::default()
},
ColorSwatch,
ColorSwatchValue::default(),
AlphaPattern,
MaterialNode::<AlphaPatternMaterial>(Handle::default()),
BorderRadius::all(Val::Px(5.0)),
overrides,
children![(
Node {
Expand All @@ -63,12 +63,12 @@ pub fn color_swatch<B: Bundle>(overrides: B) -> impl Bundle {
top: Val::Px(0.),
bottom: Val::Px(0.),
right: Val::Px(0.),
border_radius: BorderRadius::all(Val::Px(5.0)),
..Default::default()
},
ColorSwatchFg,
BackgroundColor(palette::ACCENT.with_alpha(0.5)),
BorderRadius::all(Val::Px(5.0))
),],
)],
)
}

Expand Down
4 changes: 2 additions & 2 deletions crates/bevy_feathers/src/controls/radio.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,19 +85,19 @@ pub fn radio<C: SpawnableList<ChildOf> + Send + Sync + 'static, B: Bundle>(
width: size::RADIO_SIZE,
height: size::RADIO_SIZE,
border: UiRect::all(Val::Px(2.0)),
border_radius: BorderRadius::MAX,
..Default::default()
},
RadioOutline,
BorderRadius::MAX,
ThemeBorderColor(tokens::RADIO_BORDER),
children![(
// Cheesy checkmark: rotated node with L-shaped border.
Node {
width: Val::Px(8.),
height: Val::Px(8.),
border_radius: BorderRadius::MAX,
..Default::default()
},
BorderRadius::MAX,
RadioMark,
ThemeBackgroundColor(tokens::RADIO_MARK),
)],
Expand Down
2 changes: 1 addition & 1 deletion crates/bevy_feathers/src/controls/slider.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ pub fn slider<B: Bundle>(props: SliderProps, overrides: B) -> impl Bundle {
align_items: AlignItems::Center,
padding: UiRect::axes(Val::Px(8.0), Val::Px(0.)),
flex_grow: 1.0,
border_radius: RoundedCorners::All.to_border_radius(6.0),
..Default::default()
},
Slider {
Expand All @@ -96,7 +97,6 @@ pub fn slider<B: Bundle>(props: SliderProps, overrides: B) -> impl Bundle {
SliderRange::new(props.min, props.max),
EntityCursor::System(bevy_window::SystemCursorIcon::EwResize),
TabIndex(0),
RoundedCorners::All.to_border_radius(6.0),
// Use a gradient to draw the moving bar
BackgroundGradient(vec![Gradient::Linear(LinearGradient {
angle: PI * 0.5,
Expand Down
4 changes: 2 additions & 2 deletions crates/bevy_feathers/src/controls/toggle_switch.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,11 +54,11 @@ pub fn toggle_switch<B: Bundle>(overrides: B) -> impl Bundle {
width: size::TOGGLE_WIDTH,
height: size::TOGGLE_HEIGHT,
border: UiRect::all(Val::Px(2.0)),
border_radius: BorderRadius::all(Val::Px(5.0)),
..Default::default()
},
Checkbox,
ToggleSwitchOutline,
BorderRadius::all(Val::Px(5.0)),
ThemeBackgroundColor(tokens::SWITCH_BG),
ThemeBorderColor(tokens::SWITCH_BORDER),
AccessibilityNode(accesskit::Node::new(Role::Switch)),
Expand All @@ -73,9 +73,9 @@ pub fn toggle_switch<B: Bundle>(overrides: B) -> impl Bundle {
top: Val::Px(0.),
bottom: Val::Px(0.),
width: Val::Percent(50.),
border_radius: BorderRadius::all(Val::Px(3.0)),
..Default::default()
},
BorderRadius::all(Val::Px(3.0)),
ToggleSwitchSlide,
ThemeBackgroundColor(tokens::SWITCH_SLIDE),
)],
Expand Down
3 changes: 3 additions & 0 deletions crates/bevy_ui/src/layout/convert.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -448,6 +448,8 @@ impl RepeatedGridTrack {
mod tests {
use bevy_math::Vec2;

use crate::BorderRadius;

use super::*;

#[test]
Expand Down Expand Up @@ -489,6 +491,7 @@ mod tests {
top: Val::Auto,
bottom: Val::Percent(31.),
},
border_radius: BorderRadius::DEFAULT,
flex_grow: 1.,
flex_shrink: 0.,
flex_basis: Val::ZERO,
Expand Down
21 changes: 8 additions & 13 deletions crates/bevy_ui/src/layout/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
use crate::{
experimental::{UiChildren, UiRootNodes},
ui_transform::{UiGlobalTransform, UiTransform},
BorderRadius, ComputedNode, ComputedUiRenderTargetInfo, ContentSize, Display, IgnoreScroll,
LayoutConfig, Node, Outline, OverflowAxis, ScrollPosition,
ComputedNode, ComputedUiRenderTargetInfo, ContentSize, Display, IgnoreScroll, LayoutConfig,
Node, Outline, OverflowAxis, ScrollPosition,
};
use bevy_ecs::{
change_detection::{DetectChanges, DetectChangesMut},
Expand Down Expand Up @@ -87,7 +87,6 @@ pub fn ui_layout_system(
&mut UiGlobalTransform,
&Node,
Option<&LayoutConfig>,
Option<&BorderRadius>,
Option<&Outline>,
Option<&ScrollPosition>,
Option<&IgnoreScroll>,
Expand Down Expand Up @@ -199,7 +198,6 @@ pub fn ui_layout_system(
&mut UiGlobalTransform,
&Node,
Option<&LayoutConfig>,
Option<&BorderRadius>,
Option<&Outline>,
Option<&ScrollPosition>,
Option<&IgnoreScroll>,
Expand All @@ -215,7 +213,6 @@ pub fn ui_layout_system(
mut global_transform,
style,
maybe_layout_config,
maybe_border_radius,
maybe_outline,
maybe_scroll_position,
maybe_scroll_sticky,
Expand Down Expand Up @@ -279,14 +276,12 @@ pub fn ui_layout_system(
*global_transform = inherited_transform.into();
}

if let Some(border_radius) = maybe_border_radius {
// We don't trigger change detection for changes to border radius
node.bypass_change_detection().border_radius = border_radius.resolve(
inverse_target_scale_factor.recip(),
node.size,
target_size,
);
}
// We don't trigger change detection for changes to border radius
node.bypass_change_detection().border_radius = style.border_radius.resolve(
inverse_target_scale_factor.recip(),
node.size,
target_size,
);

if let Some(outline) = maybe_outline {
// don't trigger change detection when only outlines are changed
Expand Down
65 changes: 52 additions & 13 deletions crates/bevy_ui/src/ui_node.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -395,7 +395,6 @@ impl From<BVec2> for IgnoreScroll {
UiTransform,
BackgroundColor,
BorderColor,
BorderRadius,
FocusPolicy,
ScrollPosition,
Visibility,
Expand Down Expand Up @@ -611,6 +610,45 @@ pub struct Node {
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/border-width>
pub border: UiRect,

/// 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
/// ```rust
/// # 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.)),
/// border_radius: BorderRadius::new(
/// // top left
/// Val::Px(10.),
/// // top right
/// Val::Px(20.),
/// // bottom right
/// Val::Px(30.),
/// // bottom left
/// Val::Px(40.),
/// ),
/// ..Default::default()
/// },
/// BackgroundColor(BLUE.into()),
/// ));
/// }
/// ```
///
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius>
pub border_radius: BorderRadius,

/// Whether a Flexbox container should be a row or a column. This property has no effect on Grid nodes.
///
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction>
Expand Down Expand Up @@ -712,6 +750,7 @@ impl Node {
margin: UiRect::DEFAULT,
padding: UiRect::DEFAULT,
border: UiRect::DEFAULT,
border_radius: BorderRadius::DEFAULT,
flex_grow: 0.0,
flex_shrink: 1.0,
flex_basis: Val::Auto,
Expand Down Expand Up @@ -2313,26 +2352,26 @@ pub struct GlobalZIndex(pub i32);
/// width: Val::Px(100.),
/// height: Val::Px(100.),
/// border: UiRect::all(Val::Px(2.)),
/// border_radius: BorderRadius::new(
/// // top left
/// Val::Px(10.),
/// // top right
/// Val::Px(20.),
/// // bottom right
/// Val::Px(30.),
/// // bottom left
/// Val::Px(40.),
/// ),
/// ..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>
#[derive(Component, Copy, Clone, Debug, PartialEq, Reflect)]
#[reflect(Component, PartialEq, Default, Debug, Clone)]
#[derive(Copy, Clone, Debug, PartialEq, Reflect)]
#[reflect(PartialEq, Default, Debug, Clone)]
#[cfg_attr(
feature = "serialize",
derive(serde::Serialize, serde::Deserialize),
Expand Down
2 changes: 1 addition & 1 deletion examples/3d/clustered_decals.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -281,11 +281,11 @@ fn drag_button(label: &str) -> impl Bundle {
justify_content: JustifyContent::Center,
align_items: AlignItems::Center,
padding: BUTTON_PADDING,
border_radius: BorderRadius::all(BUTTON_BORDER_RADIUS_SIZE),
..default()
},
Button,
BackgroundColor(Color::BLACK),
BorderRadius::all(BUTTON_BORDER_RADIUS_SIZE),
BUTTON_BORDER_COLOR,
children![widgets::ui_text(label, Color::WHITE)],
)
Expand Down
2 changes: 1 addition & 1 deletion examples/3d/color_grading.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,10 +244,10 @@ fn button_for_value(
align_items: AlignItems::Center,
padding: UiRect::axes(px(12), px(6)),
margin: UiRect::right(px(12)),
border_radius: BorderRadius::MAX,
..default()
},
BorderColor::all(Color::WHITE),
BorderRadius::MAX,
BackgroundColor(Color::BLACK),
ColorGradingOptionWidget {
widget_type: ColorGradingOptionWidgetType::Button,
Expand Down
Loading