Allow individual corner radii on containers, images, and drop shadows (#2841)

Here's an example in `crates/gpui/examples/corner_radii.rs`

![CleanShot 2023-08-12 at 11 06
09@2x](https://github.com/zed-industries/zed/assets/1789/1b5992ac-f7ef-45d8-b8c2-f0e677b07dd9)

@iamnbutler, in the themes, anywhere we have a container style can now
take either a `corner_radius` or a `corner_radii` field, both of these
fields can either have 1 number (for all 4 corners) or a an object like:

```
{
  top_left?: number,
  top_right?: number,
  bottom_left?: number, 
  bottom_right?:number 
} 
```

Fields that are not included in this second representation default to 0
corner radius.

crates/collab_ui/src/contact_list.rs

@@ -837,7 +837,7 @@ impl ContactList {
                                 ),
                                 background: Some(tree_branch.color),
                                 border: gpui::Border::default(),
-                                corner_radius: 0.,
+                                corner_radii: Default::default(),
                             });
                             scene.push_quad(gpui::Quad {
                                 bounds: RectF::from_points(
@@ -846,7 +846,7 @@ impl ContactList {
                                 ),
                                 background: Some(tree_branch.color),
                                 border: gpui::Border::default(),
-                                corner_radius: 0.,
+                                corner_radii: Default::default(),
                             });
                         }))
                         .constrained()
@@ -934,7 +934,7 @@ impl ContactList {
                                     ),
                                     background: Some(tree_branch.color),
                                     border: gpui::Border::default(),
-                                    corner_radius: 0.,
+                                    corner_radii: Default::default(),
                                 });
                                 scene.push_quad(gpui::Quad {
                                     bounds: RectF::from_points(
@@ -943,7 +943,7 @@ impl ContactList {
                                     ),
                                     background: Some(tree_branch.color),
                                     border: gpui::Border::default(),
-                                    corner_radius: 0.,
+                                    corner_radii: Default::default(),
                                 });
                             }))
                             .constrained()

crates/editor/src/element.rs

@@ -488,13 +488,13 @@ impl EditorElement {
             bounds: gutter_bounds,
             background: Some(self.style.gutter_background),
             border: Border::new(0., Color::transparent_black()),
-            corner_radius: 0.,
+            corner_radii: Default::default(),
         });
         scene.push_quad(Quad {
             bounds: text_bounds,
             background: Some(self.style.background),
             border: Border::new(0., Color::transparent_black()),
-            corner_radius: 0.,
+            corner_radii: Default::default(),
         });
 
         if let EditorMode::Full = layout.mode {
@@ -522,7 +522,7 @@ impl EditorElement {
                         bounds: RectF::new(origin, size),
                         background: Some(self.style.active_line_background),
                         border: Border::default(),
-                        corner_radius: 0.,
+                        corner_radii: Default::default(),
                     });
                 }
             }
@@ -542,7 +542,7 @@ impl EditorElement {
                     bounds: RectF::new(origin, size),
                     background: Some(self.style.highlighted_line_background),
                     border: Border::default(),
-                    corner_radius: 0.,
+                    corner_radii: Default::default(),
                 });
             }
 
@@ -572,7 +572,7 @@ impl EditorElement {
                     ),
                     background: Some(color),
                     border: Border::new(0., Color::transparent_black()),
-                    corner_radius: 0.,
+                    corner_radii: Default::default(),
                 });
             }
         }
@@ -673,7 +673,7 @@ impl EditorElement {
                         bounds: highlight_bounds,
                         background: Some(diff_style.modified),
                         border: Border::new(0., Color::transparent_black()),
-                        corner_radius: 1. * line_height,
+                        corner_radii: (1. * line_height).into(),
                     });
 
                     continue;
@@ -706,7 +706,7 @@ impl EditorElement {
                         bounds: highlight_bounds,
                         background: Some(diff_style.deleted),
                         border: Border::new(0., Color::transparent_black()),
-                        corner_radius: 1. * line_height,
+                        corner_radii: (1. * line_height).into(),
                     });
 
                     continue;
@@ -728,7 +728,7 @@ impl EditorElement {
                 bounds: highlight_bounds,
                 background: Some(color),
                 border: Border::new(0., Color::transparent_black()),
-                corner_radius: diff_style.corner_radius * line_height,
+                corner_radii: (diff_style.corner_radius * line_height).into(),
             });
         }
     }
@@ -1129,7 +1129,7 @@ impl EditorElement {
                         bounds,
                         background: Some(color),
                         border,
-                        corner_radius: style.thumb.corner_radius,
+                        corner_radii: style.thumb.corner_radii.into(),
                     })
                 };
                 let background_ranges = editor
@@ -1189,7 +1189,7 @@ impl EditorElement {
                         bounds,
                         background: Some(color),
                         border,
-                        corner_radius: style.thumb.corner_radius,
+                        corner_radii: style.thumb.corner_radii.into(),
                     })
                 }
             }
@@ -1198,7 +1198,7 @@ impl EditorElement {
                 bounds: thumb_bounds,
                 border: style.thumb.border,
                 background: style.thumb.background_color,
-                corner_radius: style.thumb.corner_radius,
+                corner_radii: style.thumb.corner_radii.into(),
             });
         }
 
@@ -2725,14 +2725,14 @@ impl Cursor {
                 bounds,
                 background: None,
                 border: Border::all(1., self.color),
-                corner_radius: 0.,
+                corner_radii: Default::default(),
             });
         } else {
             scene.push_quad(Quad {
                 bounds,
                 background: Some(self.color),
                 border: Default::default(),
-                corner_radius: 0.,
+                corner_radii: Default::default(),
             });
         }
 

crates/editor/src/hover_popover.rs

@@ -599,7 +599,7 @@ impl InfoPopover {
                                         bounds,
                                         background: Some(code_span_background_color),
                                         border: Default::default(),
-                                        corner_radius: 2.0,
+                                        corner_radii: (2.0).into(),
                                     });
                                 }
                             },

crates/gpui/examples/corner_radii.rs

@@ -0,0 +1,155 @@
+use gpui::{
+    color::Color, geometry::rect::RectF, scene::Shadow, AnyElement, App, Element, Entity, Quad,
+    View,
+};
+use log::LevelFilter;
+use pathfinder_geometry::vector::vec2f;
+use simplelog::SimpleLogger;
+
+fn main() {
+    SimpleLogger::init(LevelFilter::Info, Default::default()).expect("could not initialize logger");
+
+    App::new(()).unwrap().run(|cx| {
+        cx.platform().activate(true);
+        cx.add_window(Default::default(), |_| CornersView);
+    });
+}
+
+struct CornersView;
+
+impl Entity for CornersView {
+    type Event = ();
+}
+
+impl View for CornersView {
+    fn ui_name() -> &'static str {
+        "CornersView"
+    }
+
+    fn render(&mut self, _: &mut gpui::ViewContext<Self>) -> AnyElement<CornersView> {
+        CornersElement.into_any()
+    }
+}
+
+struct CornersElement;
+
+impl<V: View> gpui::Element<V> for CornersElement {
+    type LayoutState = ();
+
+    type PaintState = ();
+
+    fn layout(
+        &mut self,
+        constraint: gpui::SizeConstraint,
+        _: &mut V,
+        _: &mut gpui::LayoutContext<V>,
+    ) -> (gpui::geometry::vector::Vector2F, Self::LayoutState) {
+        (constraint.max, ())
+    }
+
+    fn paint(
+        &mut self,
+        scene: &mut gpui::SceneBuilder,
+        bounds: pathfinder_geometry::rect::RectF,
+        _: pathfinder_geometry::rect::RectF,
+        _: &mut Self::LayoutState,
+        _: &mut V,
+        _: &mut gpui::PaintContext<V>,
+    ) -> Self::PaintState {
+        scene.push_quad(Quad {
+            bounds,
+            background: Some(Color::white()),
+            ..Default::default()
+        });
+
+        scene.push_layer(None);
+
+        scene.push_quad(Quad {
+            bounds: RectF::new(vec2f(100., 100.), vec2f(100., 100.)),
+            background: Some(Color::red()),
+            border: Default::default(),
+            corner_radii: gpui::scene::CornerRadii {
+                top_left: 20.,
+                ..Default::default()
+            },
+        });
+
+        scene.push_quad(Quad {
+            bounds: RectF::new(vec2f(200., 100.), vec2f(100., 100.)),
+            background: Some(Color::green()),
+            border: Default::default(),
+            corner_radii: gpui::scene::CornerRadii {
+                top_right: 20.,
+                ..Default::default()
+            },
+        });
+
+        scene.push_quad(Quad {
+            bounds: RectF::new(vec2f(100., 200.), vec2f(100., 100.)),
+            background: Some(Color::blue()),
+            border: Default::default(),
+            corner_radii: gpui::scene::CornerRadii {
+                bottom_left: 20.,
+                ..Default::default()
+            },
+        });
+
+        scene.push_quad(Quad {
+            bounds: RectF::new(vec2f(200., 200.), vec2f(100., 100.)),
+            background: Some(Color::yellow()),
+            border: Default::default(),
+            corner_radii: gpui::scene::CornerRadii {
+                bottom_right: 20.,
+                ..Default::default()
+            },
+        });
+
+        scene.push_shadow(Shadow {
+            bounds: RectF::new(vec2f(400., 100.), vec2f(100., 100.)),
+            corner_radii: gpui::scene::CornerRadii {
+                bottom_right: 20.,
+                ..Default::default()
+            },
+            sigma: 20.0,
+            color: Color::black(),
+        });
+
+        scene.push_layer(None);
+        scene.push_quad(Quad {
+            bounds: RectF::new(vec2f(400., 100.), vec2f(100., 100.)),
+            background: Some(Color::red()),
+            border: Default::default(),
+            corner_radii: gpui::scene::CornerRadii {
+                bottom_right: 20.,
+                ..Default::default()
+            },
+        });
+
+        scene.pop_layer();
+        scene.pop_layer();
+    }
+
+    fn rect_for_text_range(
+        &self,
+        _: std::ops::Range<usize>,
+        _: pathfinder_geometry::rect::RectF,
+        _: pathfinder_geometry::rect::RectF,
+        _: &Self::LayoutState,
+        _: &Self::PaintState,
+        _: &V,
+        _: &gpui::ViewContext<V>,
+    ) -> Option<pathfinder_geometry::rect::RectF> {
+        unimplemented!()
+    }
+
+    fn debug(
+        &self,
+        _: pathfinder_geometry::rect::RectF,
+        _: &Self::LayoutState,
+        _: &Self::PaintState,
+        _: &V,
+        _: &gpui::ViewContext<V>,
+    ) -> serde_json::Value {
+        unimplemented!()
+    }
+}

crates/gpui/src/elements/container.rs

@@ -9,7 +9,7 @@ use crate::{
     },
     json::ToJson,
     platform::CursorStyle,
-    scene::{self, Border, CursorRegion, Quad},
+    scene::{self, Border, CornerRadii, CursorRegion, Quad},
     AnyElement, Element, LayoutContext, PaintContext, SceneBuilder, SizeConstraint, View,
     ViewContext,
 };
@@ -30,7 +30,8 @@ pub struct ContainerStyle {
     #[serde(default)]
     pub border: Border,
     #[serde(default)]
-    pub corner_radius: f32,
+    #[serde(alias = "corner_radius")]
+    pub corner_radii: CornerRadii,
     #[serde(default)]
     pub shadow: Option<Shadow>,
     #[serde(default)]
@@ -133,7 +134,10 @@ impl<V: View> Container<V> {
     }
 
     pub fn with_corner_radius(mut self, radius: f32) -> Self {
-        self.style.corner_radius = radius;
+        self.style.corner_radii.top_left = radius;
+        self.style.corner_radii.top_right = radius;
+        self.style.corner_radii.bottom_right = radius;
+        self.style.corner_radii.bottom_left = radius;
         self
     }
 
@@ -225,7 +229,7 @@ impl<V: View> Element<V> for Container<V> {
         if let Some(shadow) = self.style.shadow.as_ref() {
             scene.push_shadow(scene::Shadow {
                 bounds: quad_bounds + shadow.offset,
-                corner_radius: self.style.corner_radius,
+                corner_radii: self.style.corner_radii,
                 sigma: shadow.blur,
                 color: shadow.color,
             });
@@ -248,7 +252,7 @@ impl<V: View> Element<V> for Container<V> {
                 bounds: quad_bounds,
                 background: self.style.background_color,
                 border: Default::default(),
-                corner_radius: self.style.corner_radius,
+                corner_radii: self.style.corner_radii.into(),
             });
 
             self.child
@@ -259,7 +263,7 @@ impl<V: View> Element<V> for Container<V> {
                 bounds: quad_bounds,
                 background: self.style.overlay_color,
                 border: self.style.border,
-                corner_radius: self.style.corner_radius,
+                corner_radii: self.style.corner_radii.into(),
             });
             scene.pop_layer();
         } else {
@@ -267,7 +271,7 @@ impl<V: View> Element<V> for Container<V> {
                 bounds: quad_bounds,
                 background: self.style.background_color,
                 border: self.style.border,
-                corner_radius: self.style.corner_radius,
+                corner_radii: self.style.corner_radii.into(),
             });
 
             let child_origin = child_origin
@@ -284,7 +288,7 @@ impl<V: View> Element<V> for Container<V> {
                     bounds: quad_bounds,
                     background: self.style.overlay_color,
                     border: Default::default(),
-                    corner_radius: 0.,
+                    corner_radii: self.style.corner_radii.into(),
                 });
                 scene.pop_layer();
             }
@@ -328,7 +332,7 @@ impl ToJson for ContainerStyle {
             "padding": self.padding.to_json(),
             "background_color": self.background_color.to_json(),
             "border": self.border.to_json(),
-            "corner_radius": self.corner_radius,
+            "corner_radius": self.corner_radii,
             "shadow": self.shadow.to_json(),
         })
     }

crates/gpui/src/elements/image.rs

@@ -103,7 +103,7 @@ impl<V: View> Element<V> for Image {
             scene.push_image(scene::Image {
                 bounds,
                 border: self.style.border,
-                corner_radius: self.style.corner_radius,
+                corner_radii: self.style.corner_radius.into(),
                 grayscale: self.style.grayscale,
                 data: data.clone(),
             });

crates/gpui/src/platform/mac/renderer.rs

@@ -509,10 +509,14 @@ impl Renderer {
         };
         for (ix, shadow) in shadows.iter().enumerate() {
             let shape_bounds = shadow.bounds * scale_factor;
+            let corner_radii = shadow.corner_radii * scale_factor;
             let shader_shadow = shaders::GPUIShadow {
                 origin: shape_bounds.origin().to_float2(),
                 size: shape_bounds.size().to_float2(),
-                corner_radius: shadow.corner_radius * scale_factor,
+                corner_radius_top_left: corner_radii.top_left,
+                corner_radius_top_right: corner_radii.top_right,
+                corner_radius_bottom_right: corner_radii.bottom_right,
+                corner_radius_bottom_left: corner_radii.bottom_left,
                 sigma: shadow.sigma,
                 color: shadow.color.to_uchar4(),
             };
@@ -586,7 +590,10 @@ impl Renderer {
                 border_bottom: border_width * (quad.border.bottom as usize as f32),
                 border_left: border_width * (quad.border.left as usize as f32),
                 border_color: quad.border.color.to_uchar4(),
-                corner_radius: quad.corner_radius * scale_factor,
+                corner_radius_top_left: quad.corner_radii.top_left * scale_factor,
+                corner_radius_top_right: quad.corner_radii.top_right * scale_factor,
+                corner_radius_bottom_right: quad.corner_radii.bottom_right * scale_factor,
+                corner_radius_bottom_left: quad.corner_radii.bottom_left * scale_factor,
             };
             unsafe {
                 *(buffer_contents.add(ix)) = shader_quad;
@@ -738,7 +745,7 @@ impl Renderer {
         for image in images {
             let origin = image.bounds.origin() * scale_factor;
             let target_size = image.bounds.size() * scale_factor;
-            let corner_radius = image.corner_radius * scale_factor;
+            let corner_radii = image.corner_radii * scale_factor;
             let border_width = image.border.width * scale_factor;
             let (alloc_id, atlas_bounds) = self.image_cache.render(&image.data);
             images_by_atlas
@@ -754,7 +761,10 @@ impl Renderer {
                     border_bottom: border_width * (image.border.bottom as usize as f32),
                     border_left: border_width * (image.border.left as usize as f32),
                     border_color: image.border.color.to_uchar4(),
-                    corner_radius,
+                    corner_radius_top_left: corner_radii.top_left,
+                    corner_radius_top_right: corner_radii.top_right,
+                    corner_radius_bottom_right: corner_radii.bottom_right,
+                    corner_radius_bottom_left: corner_radii.bottom_left,
                     grayscale: image.grayscale as u8,
                 });
         }
@@ -777,7 +787,10 @@ impl Renderer {
                         border_bottom: 0.,
                         border_left: 0.,
                         border_color: Default::default(),
-                        corner_radius: 0.,
+                        corner_radius_top_left: 0.,
+                        corner_radius_top_right: 0.,
+                        corner_radius_bottom_right: 0.,
+                        corner_radius_bottom_left: 0.,
                         grayscale: false as u8,
                     });
             } else {

crates/gpui/src/platform/mac/shaders/shaders.h

@@ -19,7 +19,10 @@ typedef struct {
   float border_bottom;
   float border_left;
   vector_uchar4 border_color;
-  float corner_radius;
+  float corner_radius_top_left;
+  float corner_radius_top_right;
+  float corner_radius_bottom_right;
+  float corner_radius_bottom_left;
 } GPUIQuad;
 
 typedef enum {
@@ -31,7 +34,10 @@ typedef enum {
 typedef struct {
   vector_float2 origin;
   vector_float2 size;
-  float corner_radius;
+  float corner_radius_top_left;
+  float corner_radius_top_right;
+  float corner_radius_bottom_right;
+  float corner_radius_bottom_left;
   float sigma;
   vector_uchar4 color;
 } GPUIShadow;
@@ -89,7 +95,10 @@ typedef struct {
   float border_bottom;
   float border_left;
   vector_uchar4 border_color;
-  float corner_radius;
+  float corner_radius_top_left;
+  float corner_radius_top_right;
+  float corner_radius_bottom_right;
+  float corner_radius_bottom_left;
   uint8_t grayscale;
 } GPUIImage;
 

crates/gpui/src/platform/mac/shaders/shaders.metal

@@ -43,7 +43,10 @@ struct QuadFragmentInput {
     float border_bottom;
     float border_left;
     float4 border_color;
-    float corner_radius;
+    float corner_radius_top_left;
+    float corner_radius_top_right;
+    float corner_radius_bottom_right;
+    float corner_radius_bottom_left;
     uchar grayscale; // only used in image shader
 };
 
@@ -51,12 +54,27 @@ float4 quad_sdf(QuadFragmentInput input) {
     float2 half_size = input.size / 2.;
     float2 center = input.origin + half_size;
     float2 center_to_point = input.position.xy - center;
-    float2 rounded_edge_to_point = abs(center_to_point) - half_size + input.corner_radius;
+    float corner_radius;
-    float distance = length(max(0., rounded_edge_to_point)) + min(0., max(rounded_edge_to_point.x, rounded_edge_to_point.y)) - input.corner_radius;
+    if (center_to_point.x < 0.) {
+        if (center_to_point.y < 0.) {
+            corner_radius = input.corner_radius_top_left;
+        } else {
+            corner_radius = input.corner_radius_bottom_left;
+        }
+    } else {
+        if (center_to_point.y < 0.) {
+            corner_radius = input.corner_radius_top_right;
+        } else {
+            corner_radius = input.corner_radius_bottom_right;
+        }
+    }
+
+    float2 rounded_edge_to_point = abs(center_to_point) - half_size + corner_radius;
+    float distance = length(max(0., rounded_edge_to_point)) + min(0., max(rounded_edge_to_point.x, rounded_edge_to_point.y)) - corner_radius;
 
     float vertical_border = center_to_point.x <= 0. ? input.border_left : input.border_right;
     float horizontal_border = center_to_point.y <= 0. ? input.border_top : input.border_bottom;
-    float2 inset_size = half_size - input.corner_radius - float2(vertical_border, horizontal_border);
+    float2 inset_size = half_size - corner_radius - float2(vertical_border, horizontal_border);
     float2 point_to_inset_corner = abs(center_to_point) - inset_size;
     float border_width;
     if (point_to_inset_corner.x < 0. && point_to_inset_corner.y < 0.) {
@@ -110,7 +128,10 @@ vertex QuadFragmentInput quad_vertex(
         quad.border_bottom,
         quad.border_left,
         coloru_to_colorf(quad.border_color),
-        quad.corner_radius,
+        quad.corner_radius_top_left,
+        quad.corner_radius_top_right,
+        quad.corner_radius_bottom_right,
+        quad.corner_radius_bottom_left,
         0,
     };
 }
@@ -125,7 +146,10 @@ struct ShadowFragmentInput {
     float4 position [[position]];
     vector_float2 origin;
     vector_float2 size;
-    float corner_radius;
+    float corner_radius_top_left;
+    float corner_radius_top_right;
+    float corner_radius_bottom_right;
+    float corner_radius_bottom_left;
     float sigma;
     vector_uchar4 color;
 };
@@ -148,7 +172,10 @@ vertex ShadowFragmentInput shadow_vertex(
         device_position,
         shadow.origin,
         shadow.size,
-        shadow.corner_radius,
+        shadow.corner_radius_top_left,
+        shadow.corner_radius_top_right,
+        shadow.corner_radius_bottom_right,
+        shadow.corner_radius_bottom_left,
         shadow.sigma,
         shadow.color,
     };
@@ -158,10 +185,24 @@ fragment float4 shadow_fragment(
     ShadowFragmentInput input [[stage_in]]
 ) {
     float sigma = input.sigma;
-    float corner_radius = input.corner_radius;
     float2 half_size = input.size / 2.;
     float2 center = input.origin + half_size;
     float2 point = input.position.xy - center;
+    float2 center_to_point = input.position.xy - center;
+    float corner_radius;
+    if (center_to_point.x < 0.) {
+        if (center_to_point.y < 0.) {
+            corner_radius = input.corner_radius_top_left;
+        } else {
+            corner_radius = input.corner_radius_bottom_left;
+        }
+    } else {
+        if (center_to_point.y < 0.) {
+            corner_radius = input.corner_radius_top_right;
+        } else {
+            corner_radius = input.corner_radius_bottom_right;
+        }
+    }
 
     // The signal is only non-zero in a limited range, so don't waste samples
     float low = point.y - half_size.y;
@@ -252,7 +293,10 @@ vertex QuadFragmentInput image_vertex(
         image.border_bottom,
         image.border_left,
         coloru_to_colorf(image.border_color),
-        image.corner_radius,
+        image.corner_radius_top_left,
+        image.corner_radius_top_right,
+        image.corner_radius_bottom_right,
+        image.corner_radius_bottom_left,
         image.grayscale,
     };
 }
@@ -266,7 +310,7 @@ fragment float4 image_fragment(
     if (input.grayscale) {
         float grayscale =
             0.2126 * input.background_color.r +
-            0.7152 * input.background_color.g + 
+            0.7152 * input.background_color.g +
             0.0722 * input.background_color.b;
         input.background_color = float4(grayscale, grayscale, grayscale, input.background_color.a);
     }

crates/gpui/src/scene.rs

@@ -3,8 +3,10 @@ mod mouse_region;
 
 #[cfg(debug_assertions)]
 use collections::HashSet;
+use derive_more::Mul;
 use schemars::JsonSchema;
 use serde::Deserialize;
+use serde_derive::Serialize;
 use serde_json::json;
 use std::{borrow::Cow, sync::Arc};
 
@@ -65,13 +67,73 @@ pub struct Quad {
     pub bounds: RectF,
     pub background: Option<Color>,
     pub border: Border,
-    pub corner_radius: f32,
+    pub corner_radii: CornerRadii,
+}
+
+#[derive(Default, Debug, Mul, Clone, Copy, Serialize, JsonSchema)]
+pub struct CornerRadii {
+    pub top_left: f32,
+    pub top_right: f32,
+    pub bottom_right: f32,
+    pub bottom_left: f32,
+}
+
+impl<'de> Deserialize<'de> for CornerRadii {
+    fn deserialize<D>(deserializer: D) -> Result<Self, D::Error>
+    where
+        D: serde::Deserializer<'de>,
+    {
+        #[derive(Deserialize)]
+        pub struct CornerRadiiHelper {
+            pub top_left: Option<f32>,
+            pub top_right: Option<f32>,
+            pub bottom_right: Option<f32>,
+            pub bottom_left: Option<f32>,
+        }
+
+        #[derive(Deserialize)]
+        #[serde(untagged)]
+        enum RadiusOrRadii {
+            Radius(f32),
+            Radii(CornerRadiiHelper),
+        }
+
+        let json = RadiusOrRadii::deserialize(deserializer)?;
+
+        let result = match json {
+            RadiusOrRadii::Radius(radius) => CornerRadii::from(radius),
+            RadiusOrRadii::Radii(CornerRadiiHelper {
+                top_left,
+                top_right,
+                bottom_right,
+                bottom_left,
+            }) => CornerRadii {
+                top_left: top_left.unwrap_or(0.0),
+                top_right: top_right.unwrap_or(0.0),
+                bottom_right: bottom_right.unwrap_or(0.0),
+                bottom_left: bottom_left.unwrap_or(0.0),
+            },
+        };
+
+        Ok(result)
+    }
+}
+
+impl From<f32> for CornerRadii {
+    fn from(radius: f32) -> Self {
+        Self {
+            top_left: radius,
+            top_right: radius,
+            bottom_right: radius,
+            bottom_left: radius,
+        }
+    }
 }
 
 #[derive(Debug)]
 pub struct Shadow {
     pub bounds: RectF,
-    pub corner_radius: f32,
+    pub corner_radii: CornerRadii,
     pub sigma: f32,
     pub color: Color,
 }
@@ -177,7 +239,7 @@ pub struct PathVertex {
 pub struct Image {
     pub bounds: RectF,
     pub border: Border,
-    pub corner_radius: f32,
+    pub corner_radii: CornerRadii,
     pub grayscale: bool,
     pub data: Arc<ImageData>,
 }

crates/terminal_view/src/terminal_element.rs

@@ -153,7 +153,7 @@ impl LayoutRect {
             bounds: RectF::new(position, size),
             background: Some(self.color),
             border: Default::default(),
-            corner_radius: 0.,
+            corner_radii: Default::default(),
         })
     }
 }
@@ -763,7 +763,7 @@ impl Element<TerminalView> for TerminalElement {
                     bounds: RectF::new(bounds.origin(), bounds.size()),
                     background: Some(layout.background_color),
                     border: Default::default(),
-                    corner_radius: 0.,
+                    corner_radii: Default::default(),
                 });
 
                 for rect in &layout.rects {

crates/workspace/src/pane.rs

@@ -1397,7 +1397,7 @@ impl Pane {
                         bounds: square,
                         background: Some(color),
                         border: Default::default(),
-                        corner_radius: diameter / 2.,
+                        corner_radii: (diameter / 2.).into(),
                     });
                 }
             })

crates/workspace/src/pane/dragged_item_receiver.rs

@@ -61,7 +61,7 @@ where
                                 bounds: overlay_region,
                                 background: Some(overlay_color(cx)),
                                 border: Default::default(),
-                                corner_radius: 0.,
+                                corner_radii: Default::default(),
                             });
                         });
                     }

crates/workspace/src/workspace.rs

@@ -3614,7 +3614,7 @@ fn notify_of_new_dock(workspace: &WeakViewHandle<Workspace>, cx: &mut AsyncAppCo
                                 bounds,
                                 background: Some(code_span_background_color),
                                 border: Default::default(),
-                                corner_radius: 2.0,
+                                corner_radii: (2.0).into(),
                             })
                         })
                         .into_any()