diff --git a/Cargo.toml b/Cargo.toml
index 6063687f..c5d35f92 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -12,7 +12,9 @@ rustc-hash = "1.1.0"
 smallvec = "1.10.0"
 educe = "0.4.20"
 taffy = "0.3.13"
-rfd = { version = "0.11.4", default-features = false, features = ["xdg-portal"] }
+rfd = { version = "0.11.4", default-features = false, features = [
+    "xdg-portal",
+] }
 raw-window-handle = "0.5.1"
 kurbo = { version = "0.9.5", features = ["serde"] }
 unicode-segmentation = "1.10.0"
@@ -21,6 +23,7 @@ crossbeam-channel = "0.5.6"
 once_cell = "1.17.1"
 im = "15.1.0"
 parking_lot = { version = "0.12.1" }
+dyn-clone = "1.0.14"
 floem_renderer = { path = "renderer" }
 floem_vger = { path = "vger" }
 floem_reactive = { path = "reactive" }
diff --git a/examples/animations/src/main.rs b/examples/animations/src/main.rs
index 0edd83d6..07eb64c0 100644
--- a/examples/animations/src/main.rs
+++ b/examples/animations/src/main.rs
@@ -31,9 +31,9 @@ fn app_view() -> impl View {
                 s.border(1.0)
                     .background(Color::RED)
                     .color(Color::BLACK)
-                    .padding_px(10.0)
-                    .margin_px(20.0)
-                    .size_px(120.0, 120.0)
+                    .padding(10.0)
+                    .margin(20.0)
+                    .size(120.0, 120.0)
             })
             .active_style(|s| s.color(Color::BLACK))
             .animation(
@@ -56,8 +56,8 @@ fn app_view() -> impl View {
     .style(|s| {
         s.border(5.0)
             .background(Color::BLUE)
-            .padding_px(10.0)
-            .size_px(400.0, 400.0)
+            .padding(10.0)
+            .size(400.0, 400.0)
             .color(Color::BLACK)
     })
     .animation(
diff --git a/examples/counter/src/main.rs b/examples/counter/src/main.rs
index fa9d9c02..324e71a1 100644
--- a/examples/counter/src/main.rs
+++ b/examples/counter/src/main.rs
@@ -1,22 +1,25 @@
 use floem::{
     peniko::Color,
     reactive::create_signal,
+    style::{box_shadow, Style},
+    unit::Pct,
     view::View,
     views::{label, stack, text, Decorators},
 };
 
 fn app_view() -> impl View {
+    let button_style = |s: Style| {
+        s.p(10)
+            .border_radius(8)
+            .box_shadow(box_shadow(10, 10, 8, 2, Color::rgb(0.6, 0.6, 0.6)))
+    };
+
     let (counter, set_counter) = create_signal(0);
     stack((
-        label(move || format!("Value: {}", counter.get())).style(|s| s.padding_px(10.0)),
+        label(move || format!("Value: {}", counter.get())).style(|s| s.p(10)),
         stack((
             text("Increment")
-                .style(|s| {
-                    s.border_radius(10.0)
-                        .padding_px(10.0)
-                        .background(Color::WHITE)
-                        .box_shadow_blur(5.0)
-                })
+                .style(move |s| button_style(s).background(Color::WHITE))
                 .on_click({
                     move |_| {
                         set_counter.update(|value| *value += 1);
@@ -34,13 +37,7 @@ fn app_view() -> impl View {
                         true
                     }
                 })
-                .style(|s| {
-                    s.box_shadow_blur(5.0)
-                        .background(Color::WHITE)
-                        .border_radius(10.0)
-                        .padding_px(10.0)
-                        .margin_left_px(10.0)
-                })
+                .style(move |s| button_style(s).background(Color::WHITE).ml(16.0))
                 .hover_style(|s| s.background(Color::rgb8(244, 67, 54)))
                 .active_style(|s| s.color(Color::WHITE).background(Color::RED))
                 .keyboard_navigatable()
@@ -52,13 +49,7 @@ fn app_view() -> impl View {
                     true
                 })
                 .disabled(move || counter.get() == 0)
-                .style(|s| {
-                    s.box_shadow_blur(5.0)
-                        .border_radius(10.0)
-                        .padding_px(10.0)
-                        .margin_left_px(10.0)
-                        .background(Color::LIGHT_BLUE)
-                })
+                .style(move |s| button_style(s).ml(16).background(Color::LIGHT_BLUE))
                 .disabled_style(|s| s.background(Color::LIGHT_GRAY))
                 .hover_style(|s| s.background(Color::LIGHT_YELLOW))
                 .active_style(|s| s.color(Color::WHITE).background(Color::YELLOW_GREEN))
@@ -67,7 +58,7 @@ fn app_view() -> impl View {
         )),
     ))
     .style(|s| {
-        s.size_pct(100.0, 100.0)
+        s.size(Pct(100.0), Pct(100.0))
             .flex_col()
             .items_center()
             .justify_center()
diff --git a/examples/draggable/src/main.rs b/examples/draggable/src/main.rs
index f4031651..edd7c9e0 100644
--- a/examples/draggable/src/main.rs
+++ b/examples/draggable/src/main.rs
@@ -9,8 +9,8 @@ fn app_view() -> impl View {
         .style(|s| {
             s.border(1.0)
                 .border_radius(2.0)
-                .padding_px(10.0)
-                .margin_left_px(10.0)
+                .padding(10.0)
+                .margin_left(10.0)
         })
         .hover_style(|s| {
             s.background(Color::rgb8(244, 67, 54))
diff --git a/examples/responsive/src/main.rs b/examples/responsive/src/main.rs
index e0fd768d..bf8627b8 100644
--- a/examples/responsive/src/main.rs
+++ b/examples/responsive/src/main.rs
@@ -1,6 +1,7 @@
 use floem::{
     peniko::Color,
     responsive::{range, ScreenSize},
+    unit::Pct,
     view::View,
     views::{label, stack, Decorators},
 };
@@ -11,8 +12,8 @@ fn app_view() -> impl View {
             .style(|s| {
                 s.border(1.0)
                     .border_radius(10.0)
-                    .padding_px(10.0)
-                    .margin_horiz_px(10.0)
+                    .padding(10.0)
+                    .margin_horiz(10.0)
             })
             .responsive_style(ScreenSize::XS, |s| s.background(Color::CYAN))
             .responsive_style(ScreenSize::SM, |s| s.background(Color::PURPLE))
@@ -21,16 +22,16 @@ fn app_view() -> impl View {
             .responsive_style(ScreenSize::XL, |s| s.background(Color::PINK))
             .responsive_style(ScreenSize::XXL, |s| s.background(Color::RED))
             .responsive_style(range(ScreenSize::XS..ScreenSize::LG), |s| {
-                s.width_pct(90.0).max_width_px(500.0)
+                s.width(Pct(90.0)).max_width(500.0)
             })
             .responsive_style(
                 // equivalent to: range(ScreenSize::LG..)
                 ScreenSize::LG | ScreenSize::XL | ScreenSize::XXL,
-                |s| s.width_px(300.0),
+                |s| s.width(300.0),
             ),)
     })
     .style(|s| {
-        s.size_pct(100.0, 100.0)
+        s.size(Pct(100.0), Pct(100.0))
             .flex_col()
             .justify_center()
             .items_center()
diff --git a/examples/virtual_list/src/main.rs b/examples/virtual_list/src/main.rs
index f49a2ded..533c0f4c 100644
--- a/examples/virtual_list/src/main.rs
+++ b/examples/virtual_list/src/main.rs
@@ -3,7 +3,7 @@ use floem::{
     view::View,
     views::virtual_list,
     views::Decorators,
-    views::{container, label, scroll, VirtualListDirection, VirtualListItemSize},
+    views::{container, label, scroll, VirtualListDirection, VirtualListItemSize}, unit::Pct,
 };
 
 fn app_view() -> impl View {
@@ -17,15 +17,15 @@ fn app_view() -> impl View {
                 VirtualListItemSize::Fixed(Box::new(|| 20.0)),
                 move || long_list.get(),
                 move |item| *item,
-                move |item| label(move || item.to_string()).style(|s| s.height_px(20.0)),
+                move |item| label(move || item.to_string()).style(|s| s.height(20.0)),
             )
             .style(|s| s.flex_col()),
         )
-        .style(|s| s.width_px(100.0).height_pct(100.0).border(1.0)),
+        .style(|s| s.width(100.0).height(Pct(100.0)).border(1.0)),
     )
     .style(|s| {
-        s.size_pct(100.0, 100.0)
-            .padding_vert_px(20.0)
+        s.size(Pct(100.0), Pct(100.0))
+            .padding_vert(20.0)
             .flex_col()
             .items_center()
     })
diff --git a/examples/widget-gallery/src/buttons.rs b/examples/widget-gallery/src/buttons.rs
index 9aaa298f..953f04fb 100644
--- a/examples/widget-gallery/src/buttons.rs
+++ b/examples/widget-gallery/src/buttons.rs
@@ -18,7 +18,7 @@ pub fn button_view() -> impl View {
                     })
                     .keyboard_navigatable()
                     .focus_visible_style(|s| s.border(2.).border_color(Color::BLUE))
-                    .style(|s| s.border(1.0).border_radius(10.0).padding_px(10.0))
+                    .style(|s| s.border(1.0).border_radius(10.0).padding(10.0))
             }),
             form_item("Styled Button:".to_string(), 120.0, || {
                 label(|| "Click me")
@@ -31,8 +31,8 @@ pub fn button_view() -> impl View {
                     .style(|s| {
                         s.border(1.0)
                             .border_radius(10.0)
-                            .padding_px(10.0)
-                            .margin_left_px(10.0)
+                            .padding(10.0)
+                            .margin_left(10.0)
                             .background(Color::YELLOW_GREEN)
                             .color(Color::DARK_GREEN)
                             .cursor(CursorStyle::Pointer)
@@ -52,7 +52,7 @@ pub fn button_view() -> impl View {
                     .style(|s| {
                         s.border(1.0)
                             .border_radius(10.0)
-                            .padding_px(10.0)
+                            .padding(10.0)
                             .color(Color::GRAY)
                     })
                     .hover_style(|s| s.background(Color::rgb8(224, 224, 224)))
@@ -65,7 +65,7 @@ pub fn button_view() -> impl View {
                     })
                     .keyboard_navigatable()
                     .focus_visible_style(|s| s.border(2.).border_color(Color::BLUE))
-                    .style(|s| s.border(1.0).border_radius(10.0).padding_px(10.0))
+                    .style(|s| s.border(1.0).border_radius(10.0).padding(10.0))
             }),
         )
     })
diff --git a/examples/widget-gallery/src/context_menu.rs b/examples/widget-gallery/src/context_menu.rs
index 5d0b7f70..0fc182d2 100644
--- a/examples/widget-gallery/src/context_menu.rs
+++ b/examples/widget-gallery/src/context_menu.rs
@@ -8,7 +8,7 @@ pub fn menu_view() -> impl View {
     stack({
         (
             label(|| "Click me (Popout menu)")
-                .base_style(|s| s.padding_px(10.0).margin_bottom_px(10.0).border(1.0))
+                .base_style(|s| s.padding(10.0).margin_bottom(10.0).border(1.0))
                 .popout_menu(|| {
                     Menu::new("")
                         .entry(MenuItem::new("I am a menu item!"))
@@ -16,7 +16,7 @@ pub fn menu_view() -> impl View {
                         .entry(MenuItem::new("I am another menu item"))
                 }),
             label(|| "Right click me (Context menu)")
-                .base_style(|s| s.padding_px(10.0).border(1.0))
+                .base_style(|s| s.padding(10.0).border(1.0))
                 .context_menu(|| {
                     Menu::new("")
                         .entry(MenuItem::new("Menu item"))
diff --git a/examples/widget-gallery/src/form.rs b/examples/widget-gallery/src/form.rs
index 96fd96ae..7a01814e 100644
--- a/examples/widget-gallery/src/form.rs
+++ b/examples/widget-gallery/src/form.rs
@@ -1,5 +1,6 @@
 use floem::{
     cosmic_text::Weight,
+    unit::Pct,
     view::View,
     view_tuple::ViewTuple,
     views::{container, label, stack, Decorators},
@@ -9,9 +10,9 @@ pub fn form<VT: ViewTuple + 'static>(children: VT) -> impl View {
     stack(children).style(|s| {
         s.flex_col()
             .items_start()
-            .margin_px(10.0)
-            .padding_px(10.0)
-            .width_pct(100.0)
+            .margin(10.0)
+            .padding(10.0)
+            .width(Pct(100.0))
     })
 }
 
@@ -23,7 +24,7 @@ pub fn form_item<V: View + 'static>(
     container(
         stack((
             container(label(move || item_label.clone()).style(|s| s.font_weight(Weight::BOLD)))
-                .style(move |s| s.width_px(label_width).justify_end().margin_right_px(10.0)),
+                .style(move |s| s.width(label_width).justify_end().margin_right(10.0)),
             view_fn(),
         ))
         .style(|s| s.flex_row().items_start()),
@@ -31,9 +32,9 @@ pub fn form_item<V: View + 'static>(
     .style(|s| {
         s.flex_row()
             .items_center()
-            .margin_bottom_px(10.0)
-            .padding_px(10.0)
-            .width_pct(100.0)
-            .min_height_px(32.0)
+            .margin_bottom(10.0)
+            .padding(10.0)
+            .width(Pct(100.0))
+            .min_height(32.0)
     })
 }
diff --git a/examples/widget-gallery/src/inputs.rs b/examples/widget-gallery/src/inputs.rs
index cfb4a4a8..f12beaec 100644
--- a/examples/widget-gallery/src/inputs.rs
+++ b/examples/widget-gallery/src/inputs.rs
@@ -15,7 +15,7 @@ pub fn text_input_view() -> impl View {
         (
             form_item("Simple Input:".to_string(), 120.0, move || {
                 text_input(text)
-                    .style(|s| s.border(1.0).height_px(32.0))
+                    .style(|s| s.border(1.0).height(32.0))
                     .keyboard_navigatable()
             }),
             form_item("Styled Input:".to_string(), 120.0, move || {
@@ -25,7 +25,7 @@ pub fn text_input_view() -> impl View {
                             .background(Color::rgb8(224, 224, 224))
                             .border_radius(15.0)
                             .border_color(Color::rgb8(189, 189, 189))
-                            .padding_px(10.0)
+                            .padding(10.0)
                             .cursor(CursorStyle::Text)
                     })
                     .hover_style(|s| s.border_color(Color::rgb8(66, 66, 66)))
@@ -39,7 +39,7 @@ pub fn text_input_view() -> impl View {
                             .background(Color::rgb8(224, 224, 224))
                             .border_radius(15.0)
                             .border_color(Color::rgb8(189, 189, 189))
-                            .padding_px(10.0)
+                            .padding(10.0)
                             .cursor(CursorStyle::Text)
                     })
                     .hover_style(|s| s.border_color(Color::rgb8(66, 66, 66)))
diff --git a/examples/widget-gallery/src/labels.rs b/examples/widget-gallery/src/labels.rs
index ebb76062..c6809378 100644
--- a/examples/widget-gallery/src/labels.rs
+++ b/examples/widget-gallery/src/labels.rs
@@ -16,7 +16,7 @@ pub fn label_view() -> impl View {
             form_item("Styled Label:".to_string(), 120.0, || {
                 label(move || "This is a styled label".to_owned()).style(|s| {
                     s.background(Color::YELLOW)
-                        .padding_px(10.0)
+                        .padding(10.0)
                         .color(Color::GREEN)
                         .font_weight(Weight::BOLD)
                         .font_style(FontStyle::Italic)
diff --git a/examples/widget-gallery/src/lists.rs b/examples/widget-gallery/src/lists.rs
index 689172e3..7e52ed5c 100644
--- a/examples/widget-gallery/src/lists.rs
+++ b/examples/widget-gallery/src/lists.rs
@@ -4,7 +4,8 @@ use floem::{
     keyboard::Key,
     peniko::Color,
     reactive::create_signal,
-    style::{CursorStyle, Dimension, JustifyContent},
+    style::{CursorStyle, JustifyContent},
+    unit::Pct,
     view::View,
     views::{
         checkbox, container, label, scroll, stack, virtual_list, Decorators, VirtualListDirection,
@@ -32,11 +33,11 @@ fn simple_list() -> impl View {
             VirtualListItemSize::Fixed(Box::new(|| 20.0)),
             move || long_list.get(),
             move |item| *item,
-            move |item| label(move || item.to_string()).style(|s| s.height_px(24.0)),
+            move |item| label(move || item.to_string()).style(|s| s.height(24.0)),
         )
         .style(|s| s.flex_col()),
     )
-    .style(|s| s.width_px(100.0).height_px(300.0).border(1.0))
+    .style(|s| s.width(100.0).height(300.0).border(1.0))
 }
 
 fn enhanced_list() -> impl View {
@@ -67,7 +68,7 @@ fn enhanced_list() -> impl View {
                                 true
                             }),
                             label(move || item.to_string())
-                                .style(|s| s.height_px(32.0).font_size(32.0)),
+                                .style(|s| s.height(32.0).font_size(32.0)),
                             container({
                                 label(move || " X ")
                                     .on_click(move |_| {
@@ -78,24 +79,24 @@ fn enhanced_list() -> impl View {
                                         true
                                     })
                                     .style(|s| {
-                                        s.height_px(18.0)
+                                        s.height(18.0)
                                             .font_weight(Weight::BOLD)
                                             .color(Color::RED)
                                             .border(1.0)
                                             .border_color(Color::RED)
                                             .border_radius(16.0)
-                                            .margin_right_px(5.0)
+                                            .margin_right(5.0)
                                     })
                                     .hover_style(|s| s.color(Color::WHITE).background(Color::RED))
                             })
                             .style(|s| {
-                                s.flex_basis(Dimension::Points(0.0))
+                                s.flex_basis(0.0)
                                     .flex_grow(1.0)
                                     .justify_content(Some(JustifyContent::FlexEnd))
                             }),
                         )
                     })
-                    .style(move |s| s.height_px(item_height).width_px(list_width).items_center())
+                    .style(move |s| s.height(item_height).width(list_width).items_center())
                 })
                 .on_click(move |_| {
                     set_selected.update(|v: &mut usize| {
@@ -129,8 +130,8 @@ fn enhanced_list() -> impl View {
                 .focus_visible_style(|s| s.border(2.).border_color(Color::BLUE))
                 .style(move |s| {
                     s.flex_row()
-                        .width_pct(list_width)
-                        .height_px(item_height)
+                        .width(Pct(list_width))
+                        .height(item_height)
                         .apply_if(index == selected.get(), |s| s.background(Color::GRAY))
                         .apply_if(index != 0, |s| {
                             s.border_top(1.0).border_color(Color::LIGHT_GRAY)
@@ -139,7 +140,7 @@ fn enhanced_list() -> impl View {
                 .hover_style(|s| s.background(Color::LIGHT_GRAY).cursor(CursorStyle::Pointer))
             },
         )
-        .style(move |s| s.flex_col().width_px(list_width)),
+        .style(move |s| s.flex_col().width(list_width)),
     )
-    .style(move |s| s.width_px(list_width).height_px(300.0).border(1.0))
+    .style(move |s| s.width(list_width).height(300.0).border(1.0))
 }
diff --git a/examples/widget-gallery/src/main.rs b/examples/widget-gallery/src/main.rs
index 80a6030c..52774848 100644
--- a/examples/widget-gallery/src/main.rs
+++ b/examples/widget-gallery/src/main.rs
@@ -13,6 +13,7 @@ use floem::{
     peniko::Color,
     reactive::create_signal,
     style::CursorStyle,
+    unit::Pct,
     view::View,
     views::{
         container, container_box, label, scroll, stack, tab, virtual_list, Decorators,
@@ -82,8 +83,8 @@ fn app_view() -> impl View {
                                 .focus_visible_style(|s| s.border(2.).border_color(Color::BLUE))
                                 .style(move |s| {
                                     s.flex_row()
-                                        .width_pct(100.0)
-                                        .height_px(32.0)
+                                        .width(Pct(100.0))
+                                        .height(32.0)
                                         .border_bottom(1.0)
                                         .border_color(Color::LIGHT_GRAY)
                                         .apply_if(index == active_tab.get(), |s| {
@@ -95,21 +96,21 @@ fn app_view() -> impl View {
                                 })
                         },
                     )
-                    .style(|s| s.flex_col().width_px(140.0))
+                    .style(|s| s.flex_col().width(140.0))
                 })
                 .style(|s| {
                     s.flex_col()
-                        .width_px(140.0)
-                        .height_pct(100.0)
+                        .width(140.0)
+                        .height(Pct(100.0))
                         .border(1.0)
                         .border_color(Color::GRAY)
                 })
             })
             .style(|s| {
-                s.height_pct(100.0)
-                    .width_px(150.0)
-                    .padding_vert_px(5.0)
-                    .padding_horiz_px(5.0)
+                s.height(Pct(100.0))
+                    .width(150.0)
+                    .padding_vert(5.0)
+                    .padding_horiz(5.0)
                     .flex_col()
                     .items_center()
             }),
@@ -129,18 +130,18 @@ fn app_view() -> impl View {
                         _ => container_box(label(|| "Not implemented".to_owned())),
                     },
                 )
-                .style(|s| s.size_pct(100.0, 100.0))
+                .style(|s| s.size(Pct(100.0), Pct(100.0)))
             })
             .style(|s| {
-                s.size_pct(100.0, 100.0)
-                    .padding_vert_px(5.0)
-                    .padding_horiz_px(5.0)
+                s.size(Pct(100.0), Pct(100.0))
+                    .padding_vert(5.0)
+                    .padding_horiz(5.0)
                     .flex_col()
                     .items_center()
             }),
         )
     })
-    .style(|s| s.size_pct(100.0, 100.0))
+    .style(|s| s.size(Pct(100.0), Pct(100.0)))
 }
 
 fn main() {
diff --git a/examples/window-scale/src/main.rs b/examples/window-scale/src/main.rs
index ee437ce8..50ba0618 100644
--- a/examples/window-scale/src/main.rs
+++ b/examples/window-scale/src/main.rs
@@ -2,18 +2,18 @@ use floem::{
     peniko::Color,
     reactive::{create_rw_signal, create_signal},
     view::View,
-    views::{label, stack, Decorators},
+    views::{label, stack, Decorators}, unit::Pct,
 };
 
 fn app_view() -> impl View {
     let (counter, set_counter) = create_signal(0);
     let window_scale = create_rw_signal(1.0);
     stack((
-        label(move || format!("Value: {}", counter.get())).style(|s| s.padding_px(10.0)),
+        label(move || format!("Value: {}", counter.get())).style(|s| s.padding(10.0)),
         stack({
             (
                 label(|| "Increment")
-                    .style(|s| s.border(1.0).border_radius(10.0).padding_px(10.0))
+                    .style(|s| s.border(1.0).border_radius(10.0).padding(10.0))
                     .on_click(move |_| {
                         set_counter.update(|value| *value += 1);
                         true
@@ -30,8 +30,8 @@ fn app_view() -> impl View {
                     .style(|s| {
                         s.border(1.0)
                             .border_radius(10.0)
-                            .padding_px(10.0)
-                            .margin_left_px(10.0)
+                            .padding(10.0)
+                            .margin_left(10.0)
                     })
                     .hover_style(|s| s.background(Color::rgb8(244, 67, 54)))
                     .active_style(|s| s.color(Color::WHITE).background(Color::RED))
@@ -47,8 +47,8 @@ fn app_view() -> impl View {
                     .style(|s| {
                         s.border(1.0)
                             .border_radius(10.0)
-                            .padding_px(10.0)
-                            .margin_left_px(10.0)
+                            .padding(10.0)
+                            .margin_left(10.0)
                             .background(Color::LIGHT_BLUE)
                     })
                     .disabled_style(|s| s.background(Color::LIGHT_GRAY))
@@ -68,9 +68,9 @@ fn app_view() -> impl View {
                     .style(|s| {
                         s.border(1.0)
                             .border_radius(10.0)
-                            .margin_top_px(10.0)
-                            .margin_right_px(10.0)
-                            .padding_px(10.0)
+                            .margin_top(10.0)
+                            .margin_right(10.0)
+                            .padding(10.0)
                     })
                     .hover_style(|s| s.background(Color::LIGHT_GREEN)),
                 label(|| "Zoom Out")
@@ -81,9 +81,9 @@ fn app_view() -> impl View {
                     .style(|s| {
                         s.border(1.0)
                             .border_radius(10.0)
-                            .margin_top_px(10.0)
-                            .margin_right_px(10.0)
-                            .padding_px(10.0)
+                            .margin_top(10.0)
+                            .margin_right(10.0)
+                            .padding(10.0)
                     })
                     .hover_style(|s| s.background(Color::LIGHT_GREEN)),
                 label(|| "Zoom Reset")
@@ -95,9 +95,9 @@ fn app_view() -> impl View {
                     .style(|s| {
                         s.border(1.0)
                             .border_radius(10.0)
-                            .margin_top_px(10.0)
-                            .margin_right_px(10.0)
-                            .padding_px(10.0)
+                            .margin_top(10.0)
+                            .margin_right(10.0)
+                            .padding(10.0)
                     })
                     .hover_style(|s| s.background(Color::LIGHT_GREEN))
                     .disabled_style(|s| s.background(Color::LIGHT_GRAY)),
@@ -105,14 +105,14 @@ fn app_view() -> impl View {
         })
         .style(|s| {
             s.absolute()
-                .size_pct(100.0, 100.0)
+                .size(Pct(100.0), Pct(100.0))
                 .items_start()
                 .justify_end()
         }),
     ))
     .window_scale(move || window_scale.get())
     .style(|s| {
-        s.size_pct(100.0, 100.0)
+        s.size(Pct(100.0), Pct(100.0))
             .flex_col()
             .items_center()
             .justify_center()
diff --git a/src/context.rs b/src/context.rs
index e2acf788..daaf7149 100644
--- a/src/context.rs
+++ b/src/context.rs
@@ -23,7 +23,7 @@ use crate::{
     menu::Menu,
     pointer::PointerInputEvent,
     responsive::{GridBreakpoints, ScreenSize, ScreenSizeBp},
-    style::{ComputedStyle, CursorStyle, Style, StyleSelector},
+    style::{CursorStyle, Style, StyleFn, StyleSelector},
 };
 
 pub type EventCallback = dyn Fn(&Event) -> bool;
@@ -48,17 +48,18 @@ pub struct ViewState {
     pub(crate) viewport: Option<Rect>,
     pub(crate) layout_rect: Rect,
     pub(crate) animation: Option<Animation>,
-    pub(crate) base_style: Option<Style>,
-    pub(crate) style: Style,
-    pub(crate) dragging_style: Option<Style>,
-    pub(crate) hover_style: Option<Style>,
-    pub(crate) disabled_style: Option<Style>,
-    pub(crate) focus_style: Option<Style>,
-    pub(crate) focus_visible_style: Option<Style>,
-    pub(crate) responsive_styles: HashMap<ScreenSizeBp, Vec<Style>>,
-    pub(crate) active_style: Option<Style>,
-    pub(crate) combined_style: Style,
-    pub(crate) computed_style: ComputedStyle,
+    pub(crate) base_style: Option<Box<dyn StyleFn>>,
+    pub(crate) style: Option<Box<dyn StyleFn>>,
+    pub(crate) override_style: Option<Box<dyn StyleFn>>,
+    pub(crate) dragging_style: Option<Box<dyn StyleFn>>,
+    pub(crate) hover_style: Option<Box<dyn StyleFn>>,
+    pub(crate) disabled_style: Option<Box<dyn StyleFn>>,
+    pub(crate) focus_style: Option<Box<dyn StyleFn>>,
+    pub(crate) focus_visible_style: Option<Box<dyn StyleFn>>,
+    pub(crate) responsive_styles: HashMap<ScreenSizeBp, Vec<Box<dyn StyleFn>>>,
+    pub(crate) active_style: Option<Box<dyn StyleFn>>,
+    pub(crate) computed_style: Style,
+
     pub(crate) event_listeners: HashMap<EventListener, Box<EventCallback>>,
     pub(crate) context_menu: Option<Box<MenuCallback>>,
     pub(crate) popout_menu: Option<Box<MenuCallback>>,
@@ -77,9 +78,9 @@ impl ViewState {
             request_layout: true,
             animation: None,
             base_style: None,
-            style: Style::BASE,
-            combined_style: Style::BASE,
-            computed_style: ComputedStyle::default(),
+            style: None,
+            override_style: None,
+            computed_style: Style::default(),
             hover_style: None,
             dragging_style: None,
             disabled_style: None,
@@ -100,58 +101,55 @@ impl ViewState {
 
     pub(crate) fn compute_style(
         &mut self,
-        view_style: Option<Style>,
         interact_state: InteractionState,
         screen_size_bp: ScreenSizeBp,
     ) {
-        let mut computed_style = if let Some(view_style) = view_style {
-            if let Some(base_style) = self.base_style.clone() {
-                view_style.apply(base_style).apply(self.style.clone())
-            } else {
-                view_style.apply(self.style.clone())
-            }
-        } else if let Some(base_style) = self.base_style.clone() {
-            base_style.apply(self.style.clone())
-        } else {
-            self.style.clone()
-        };
+        let mut computed_style = Style::default();
+
+        if let Some(base_style) = &self.base_style {
+            computed_style = base_style.call(computed_style);
+        }
+
+        if let Some(style) = &self.style {
+            computed_style = style.call(computed_style);
+        }
 
         if let Some(resp_styles) = self.responsive_styles.get(&screen_size_bp) {
             for style in resp_styles {
-                computed_style = computed_style.apply(style.clone());
+                computed_style = style.call(computed_style);
             }
         }
 
         if interact_state.is_hovered && !interact_state.is_disabled {
-            if let Some(hover_style) = self.hover_style.clone() {
-                computed_style = computed_style.apply(hover_style);
+            if let Some(hover_style) = &self.hover_style {
+                computed_style = hover_style.call(computed_style);
             }
         }
 
         if interact_state.is_focused {
-            if let Some(focus_style) = self.focus_style.clone() {
-                computed_style = computed_style.apply(focus_style);
+            if let Some(focus_style) = &self.focus_style {
+                computed_style = focus_style.call(computed_style);
             }
         }
 
         let focused_keyboard =
             interact_state.using_keyboard_navigation && interact_state.is_focused;
         if focused_keyboard {
-            if let Some(focus_visible_style) = self.focus_visible_style.clone() {
-                computed_style = computed_style.apply(focus_visible_style);
+            if let Some(focus_visible_style) = &self.focus_visible_style {
+                computed_style = focus_visible_style.call(computed_style);
             }
         }
 
         let active_mouse = interact_state.is_hovered && !interact_state.using_keyboard_navigation;
         if interact_state.is_active && (active_mouse || focused_keyboard) {
-            if let Some(active_style) = self.active_style.clone() {
-                computed_style = computed_style.apply(active_style);
+            if let Some(active_style) = &self.active_style {
+                computed_style = active_style.call(computed_style);
             }
         }
 
         if interact_state.is_disabled {
-            if let Some(disabled_style) = self.disabled_style.clone() {
-                computed_style = computed_style.apply(disabled_style);
+            if let Some(disabled_style) = &self.disabled_style {
+                computed_style = disabled_style.call(computed_style);
             }
         }
 
@@ -168,10 +166,10 @@ impl ViewState {
                         animation.animate_prop(animation.elapsed().unwrap_or(Duration::ZERO), kind);
                     match kind {
                         AnimPropKind::Width => {
-                            computed_style = computed_style.width_px(val.get_f32());
+                            computed_style = computed_style.width(val.get_f32());
                         }
                         AnimPropKind::Height => {
-                            computed_style = computed_style.height_px(val.get_f32());
+                            computed_style = computed_style.height(val.get_f32());
                         }
                         AnimPropKind::Background => {
                             computed_style = computed_style.background(val.get_color());
@@ -194,18 +192,21 @@ impl ViewState {
             }
         }
 
-        self.combined_style = computed_style.clone();
-        self.computed_style = computed_style.compute(&ComputedStyle::default());
+        if let Some(override_style) = &self.override_style {
+            computed_style = override_style.call(computed_style);
+        }
+
+        self.computed_style = computed_style;
     }
 
-    pub(crate) fn add_responsive_style(&mut self, size: ScreenSize, style: Style) {
+    pub(crate) fn add_responsive_style(&mut self, size: ScreenSize, style: Box<dyn StyleFn>) {
         let breakpoints = size.breakpoints();
 
         for breakpoint in breakpoints {
             self.responsive_styles
                 .entry(breakpoint)
                 .or_insert_with(Vec::new)
-                .push(style.clone())
+                .push(dyn_clone::clone_box(&*style))
         }
     }
 }
@@ -369,14 +370,14 @@ impl AppState {
         self.compute_layout();
     }
 
-    pub(crate) fn compute_style(&mut self, id: Id, view_style: Option<Style>) {
+    pub(crate) fn compute_style(&mut self, id: Id) {
         let interact_state = self.get_interact_state(&id);
         let screen_size_bp = self.screen_size_bp;
         let view_state = self.view_state(id);
-        view_state.compute_style(view_style, interact_state, screen_size_bp);
+        view_state.compute_style(interact_state, screen_size_bp);
     }
 
-    pub(crate) fn get_computed_style(&mut self, id: Id) -> &ComputedStyle {
+    pub(crate) fn get_computed_style(&mut self, id: Id) -> &Style {
         let view_state = self.view_state(id);
         &view_state.computed_style
     }
@@ -564,14 +565,14 @@ impl<'a> EventCx<'a> {
         self.app_state.update_focus(id, keyboard_navigation);
     }
 
-    pub fn get_computed_style(&self, id: Id) -> Option<&ComputedStyle> {
+    pub fn get_computed_style(&self, id: Id) -> Option<&Style> {
         self.app_state
             .view_states
             .get(&id)
             .map(|s| &s.computed_style)
     }
 
-    pub fn get_hover_style(&self, id: Id) -> Option<&Style> {
+    pub fn get_hover_style(&self, id: Id) -> Option<&Box<dyn StyleFn>> {
         if let Some(vs) = self.app_state.view_states.get(&id) {
             return vs.hover_style.as_ref();
         }
@@ -827,7 +828,7 @@ impl<'a> LayoutCx<'a> {
         self.app_state.get_layout(id)
     }
 
-    pub fn get_computed_style(&mut self, id: Id) -> &ComputedStyle {
+    pub fn get_computed_style(&mut self, id: Id) -> &Style {
         self.app_state.get_computed_style(id)
     }
 
@@ -1004,7 +1005,7 @@ impl<'a> PaintCx<'a> {
         self.app_state.get_layout(id)
     }
 
-    pub fn get_computed_style(&mut self, id: Id) -> &ComputedStyle {
+    pub fn get_computed_style(&mut self, id: Id) -> &Style {
         self.app_state.get_computed_style(id)
     }
 
diff --git a/src/id.rs b/src/id.rs
index 1c75c250..bdd07482 100644
--- a/src/id.rs
+++ b/src/id.rs
@@ -17,7 +17,7 @@ use crate::{
     context::{EventCallback, MenuCallback, ResizeCallback},
     event::EventListener,
     responsive::ScreenSize,
-    style::{Style, StyleSelector},
+    style::{StyleFn, StyleSelector},
     update::{UpdateMessage, CENTRAL_DEFERRED_UPDATE_MESSAGES, CENTRAL_UPDATE_MESSAGES},
 };
 
@@ -140,15 +140,19 @@ impl Id {
         }
     }
 
-    pub fn update_base_style(&self, style: Style) {
+    pub fn update_base_style(&self, style: Box<dyn StyleFn>) {
         self.add_update_message(UpdateMessage::BaseStyle { id: *self, style });
     }
 
-    pub fn update_style(&self, style: Style) {
+    pub fn update_style(&self, style: Box<dyn StyleFn>) {
         self.add_update_message(UpdateMessage::Style { id: *self, style });
     }
 
-    pub fn update_style_selector(&self, style: Style, selector: StyleSelector) {
+    pub fn update_override_style(&self, style: Box<dyn StyleFn>) {
+        self.add_update_message(UpdateMessage::OverrideStyle { id: *self, style });
+    }
+
+    pub fn update_style_selector(&self, style: Box<dyn StyleFn>, selector: StyleSelector) {
         self.add_update_message(UpdateMessage::StyleSelector {
             id: *self,
             style,
@@ -164,7 +168,7 @@ impl Id {
         self.add_update_message(UpdateMessage::Draggable { id: *self });
     }
 
-    pub fn update_responsive_style(&self, style: Style, size: ScreenSize) {
+    pub fn update_responsive_style(&self, style: Box<dyn StyleFn>, size: ScreenSize) {
         self.add_update_message(UpdateMessage::ResponsiveStyle {
             id: *self,
             style,
diff --git a/src/lib.rs b/src/lib.rs
index ddb55383..241672b5 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -30,7 +30,7 @@
 //!            text_input(text),
 //!            label(|| text.get())
 //!        )
-//!     ).style(|| Style::BASE.padding_px(10.0))
+//!     ).style(|| Style::BASE.padding(10.0))
 //! }
 //! ```
 //! In this example `text` is a signal, containing a `String`,
@@ -59,8 +59,8 @@
 //!     .style(move || {
 //!         Style::BASE
 //!             .flex_row()
-//!             .width_pct(100.0)
-//!             .height_px(32.0)
+//!             .width(Pct(100.0))
+//!             .height(32.0)
 //!             .border_bottom(1.0)
 //!             .border_color(Color::LIGHT_GRAY)
 //!             .apply_if(index == active_tab.get(), |s| {
@@ -104,6 +104,7 @@ pub mod pointer;
 pub mod renderer;
 pub mod responsive;
 pub mod style;
+pub mod unit;
 mod update;
 pub mod view;
 pub mod view_tuple;
diff --git a/src/style.rs b/src/style.rs
index 7cdd2658..82352570 100644
--- a/src/style.rs
+++ b/src/style.rs
@@ -1,30 +1,4 @@
-//! # Style  
-//! Styles are divided into two parts:
-//! [`ComputedStyle`]: A style with definite values for most fields.  
-//!
-//! [`Style`]: A style with [`StyleValue`]s for the fields, where `Unset` falls back to the relevant
-//! field in the [`ComputedStyle`] and `Base` falls back to the underlying [`Style`] or the
-//! [`ComputedStyle`].
-//!
-//!
-//! A loose analogy with CSS might be:  
-//! [`ComputedStyle`] is like the browser's default style sheet for any given element (view).  
-//!   
-//! [`Style`] is like the styling associated with a *specific* element (view):
-//! ```html
-//! <div style="color: red; font-size: 12px;">
-//! ```
-//!   
-//! An override [`Style`] is perhaps closest to classes that can be applied to an element, like
-//! `div:hover { color: blue; }`.  
-//! However, we do not actually have 'classes' where you can define a separate collection of styles
-//! in the same way. So, the hover styling is still defined with the view as you construct it, so
-//! perhaps a closer pseudocode analogy is:
-//! ```html
-//! <div hover_style="color: blue;" style="color: red; font-size: 12px;">
-//! ```
-//!
-
+use dyn_clone::DynClone;
 use floem_renderer::cosmic_text::{LineHeightValue, Style as FontStyle, Weight};
 use peniko::Color;
 pub use taffy::style::{
@@ -37,6 +11,21 @@ use taffy::{
     style_helpers::TaffyZero,
 };
 
+use crate::unit::{Pct, Px, PxOrPct};
+
+pub trait StyleFn: DynClone {
+    fn call(&self, style: Style) -> Style;
+}
+
+impl<F> StyleFn for F
+where
+    F: Fn(Style) -> Style + Clone,
+{
+    fn call(&self, style: Style) -> Style {
+        self(style)
+    }
+}
+
 pub enum StyleSelector {
     Hover,
     Focus,
@@ -72,107 +61,17 @@ pub enum CursorStyle {
     NwseResize,
 }
 
-#[derive(Debug, Clone, Copy)]
-pub struct BoxShadow {
-    pub blur_radius: f64,
-    pub color: Color,
-    pub spread: f64,
-    pub h_offset: f64,
-    pub v_offset: f64,
-}
-
-impl Default for BoxShadow {
-    fn default() -> Self {
-        Self {
-            blur_radius: 0.0,
-            color: Color::BLACK,
-            spread: 0.0,
-            h_offset: 0.0,
-            v_offset: 0.0,
-        }
-    }
-}
-
-/// The value for a [`Style`] property
-#[derive(Debug, Clone, Copy, PartialEq, Eq)]
-pub enum StyleValue<T> {
-    Val(T),
-    /// Use the default value for the style, typically from the underlying `ComputedStyle`
-    Unset,
-    /// Use whatever the base style is. For an overriding style like hover, this uses the base
-    /// style. For the base style, this is equivalent to `Unset`
-    Base,
-}
-
-impl<T> StyleValue<T> {
-    pub fn map<U>(self, f: impl FnOnce(T) -> U) -> StyleValue<U> {
-        match self {
-            Self::Val(x) => StyleValue::Val(f(x)),
-            Self::Unset => StyleValue::Unset,
-            Self::Base => StyleValue::Base,
-        }
-    }
-
-    pub fn unwrap_or(self, default: T) -> T {
-        match self {
-            Self::Val(x) => x,
-            Self::Unset => default,
-            Self::Base => default,
-        }
-    }
-
-    pub fn unwrap_or_else(self, f: impl FnOnce() -> T) -> T {
-        match self {
-            Self::Val(x) => x,
-            Self::Unset => f(),
-            Self::Base => f(),
-        }
-    }
-
-    pub fn as_mut(&mut self) -> Option<&mut T> {
-        match self {
-            Self::Val(x) => Some(x),
-            Self::Unset => None,
-            Self::Base => None,
-        }
-    }
-}
-
-impl<T> Default for StyleValue<T> {
-    fn default() -> Self {
-        // By default we let the `Style` decide what to do.
-        Self::Base
-    }
-}
-
-impl<T> From<T> for StyleValue<T> {
-    fn from(x: T) -> Self {
-        Self::Val(x)
-    }
-}
-
-// Creates `ComputedStyle` which has definite values for the fields, barring some specific cases.
-// Creates `Style` which has `StyleValue<T>`s for the fields
 macro_rules! define_styles {
     (
-        $($name:ident $($opt:ident)?: $typ:ty = $val:expr),* $(,)?
+        $struct_name:ident with: $($name:ident $($opt:ident)?: $typ:ty = $val:expr),* $(,)?
     ) => {
-        /// A style with definite values for most fields.
         #[derive(Debug, Clone)]
-        pub struct ComputedStyle {
+        pub struct $struct_name {
             $(
                 pub $name: $typ,
             )*
         }
-        impl ComputedStyle {
-            $(
-                pub fn $name(mut self, v: impl Into<$typ>) -> Self {
-                    self.$name = v.into();
-                    self
-                }
-            )*
-        }
-        impl Default for ComputedStyle {
+        impl Default for $struct_name {
             fn default() -> Self {
                 Self {
                     $(
@@ -182,129 +81,101 @@ macro_rules! define_styles {
             }
         }
 
-        #[derive(Debug, Clone)]
-        pub struct Style {
-            $(
-                pub $name: StyleValue<$typ>,
-            )*
-        }
-        impl Style {
-            pub const BASE: Style = Style{
-                $(
-                    $name: StyleValue::Base,
-                )*
-            };
-
-            pub const UNSET: Style = Style{
-                $(
-                    $name: StyleValue::Unset,
-                )*
-            };
-
+        impl $struct_name {
             $(
                 define_styles!(decl: $name $($opt)?: $typ = $val);
             )*
-
-            /// Convert this `Style` into a computed style, using the given `ComputedStyle` as a base
-            /// for any missing values.
-            pub fn compute(self, underlying: &ComputedStyle) -> ComputedStyle {
-                ComputedStyle {
-                    $(
-                        $name: self.$name.unwrap_or_else(|| underlying.$name.clone()),
-                    )*
-                }
-            }
-
-            /// Apply another `Style` to this style, returning a new `Style` with the overrides
-            ///
-            /// `StyleValue::Val` will override the value with the given value
-            /// `StyleValue::Unset` will unset the value, causing it to fall back to the underlying
-            /// `ComputedStyle` (aka setting it to `None`)
-            /// `StyleValue::Base` will leave the value as-is, whether falling back to the underlying
-            /// `ComputedStyle` or using the value in the `Style`.
-            pub fn apply(self, over: Style) -> Style {
-                Style {
-                    $(
-                        $name: match (self.$name, over.$name) {
-                            (_, StyleValue::Val(x)) => StyleValue::Val(x),
-                            (StyleValue::Val(x), StyleValue::Base) => StyleValue::Val(x),
-                            (StyleValue::Val(_), StyleValue::Unset) => StyleValue::Unset,
-                            (StyleValue::Base, StyleValue::Base) => StyleValue::Base,
-                            (StyleValue::Unset, StyleValue::Base) => StyleValue::Unset,
-                            (StyleValue::Base, StyleValue::Unset) => StyleValue::Unset,
-                            (StyleValue::Unset, StyleValue::Unset) => StyleValue::Unset,
-                        },
-                    )*
-                }
-            }
-
-            /// Apply multiple `Style`s to this style, returning a new `Style` with the overrides.
-            /// Later styles take precedence over earlier styles.
-            pub fn apply_overriding_styles(self, overrides: impl Iterator<Item = Style>) -> Style {
-                overrides.fold(self, |acc, x| acc.apply(x))
-            }
         }
     };
+
     // internal submacro
 
     // 'nocb' doesn't add a builder function
     (decl: $name:ident nocb: $typ:ty = $val:expr) => {};
     (decl: $name:ident: $typ:ty = $val:expr) => {
-        pub fn $name(mut self, v: impl Into<StyleValue<$typ>>) -> Self {
+        pub fn $name(mut self, v: impl Into<$typ>) -> Self {
             self.$name = v.into();
             self
         }
     }
 }
 
+use super::*;
+
+define_styles!(
+    BoxShadow with:
+    h_offset: Px = Px(0.0),
+    v_offset: Px = Px(0.0),
+    blur_radius: Px = Px(0.0),
+    spread: Px = Px(0.0),
+    color: Color = Color::BLACK,
+);
+
+pub fn box_shadow(
+    h_offset: impl Into<Px>,
+    v_offset: impl Into<Px>,
+    blur_radius: impl Into<Px>,
+    spread: impl Into<Px>,
+    color: impl Into<Color>,
+) -> BoxShadow {
+    BoxShadow {
+        h_offset: h_offset.into(),
+        v_offset: v_offset.into(),
+        blur_radius: blur_radius.into(),
+        spread: spread.into(),
+        color: color.into(),
+    }
+}
+
 define_styles!(
+    Style with:
     display: Display = Display::Flex,
     position: Position = Position::Relative,
-    width: Dimension = Dimension::Auto,
-    height: Dimension = Dimension::Auto,
-    min_width: Dimension = Dimension::Auto,
-    min_height: Dimension = Dimension::Auto,
-    max_width: Dimension = Dimension::Auto,
-    max_height: Dimension = Dimension::Auto,
+    width nocb: Dimension = Dimension::Auto,
+    height nocb: Dimension = Dimension::Auto,
+    min_width nocb: Dimension = Dimension::Auto,
+    min_height nocb: Dimension = Dimension::Auto,
+    max_width nocb: Dimension = Dimension::Auto,
+    max_height nocb: Dimension = Dimension::Auto,
     flex_direction: FlexDirection = FlexDirection::Row,
     flex_wrap: FlexWrap = FlexWrap::NoWrap,
     flex_grow: f32 = 0.0,
     flex_shrink: f32 = 1.0,
-    flex_basis: Dimension = Dimension::Auto,
+    flex_basis nocb: Dimension = Dimension::Auto,
     justify_content: Option<JustifyContent> = None,
     justify_self: Option<AlignItems> = None,
     align_items: Option<AlignItems> = None,
     align_content: Option<AlignContent> = None,
     align_self: Option<AlignItems> = None,
-    border_left: f32 = 0.0,
-    border_top: f32 = 0.0,
-    border_right: f32 = 0.0,
-    border_bottom: f32 = 0.0,
-    border_radius: f32 = 0.0,
+    border_left: Px = Px(0.0),
+    border_top: Px = Px(0.0),
+    border_right: Px = Px(0.0),
+    border_bottom: Px = Px(0.0),
+    border_radius: Px = Px(0.0),
     outline_color: Color = Color::TRANSPARENT,
-    outline: f32 = 0.0,
+    outline: Px = Px(0.0),
     border_color: Color = Color::BLACK,
-    padding_left: LengthPercentage = LengthPercentage::ZERO,
-    padding_top: LengthPercentage = LengthPercentage::ZERO,
-    padding_right: LengthPercentage = LengthPercentage::ZERO,
-    padding_bottom: LengthPercentage = LengthPercentage::ZERO,
-    margin_left: LengthPercentageAuto = LengthPercentageAuto::ZERO,
-    margin_top: LengthPercentageAuto = LengthPercentageAuto::ZERO,
-    margin_right: LengthPercentageAuto = LengthPercentageAuto::ZERO,
-    margin_bottom: LengthPercentageAuto = LengthPercentageAuto::ZERO,
-    inset_left: LengthPercentageAuto = LengthPercentageAuto::Auto,
-    inset_top: LengthPercentageAuto = LengthPercentageAuto::Auto,
-    inset_right: LengthPercentageAuto = LengthPercentageAuto::Auto,
-    inset_bottom: LengthPercentageAuto = LengthPercentageAuto::Auto,
+    padding_left nocb: LengthPercentage = LengthPercentage::ZERO,
+    padding_top nocb: LengthPercentage = LengthPercentage::ZERO,
+    padding_right nocb: LengthPercentage = LengthPercentage::ZERO,
+    padding_bottom nocb: LengthPercentage = LengthPercentage::ZERO,
+    margin_left nocb: LengthPercentageAuto = LengthPercentageAuto::ZERO,
+    margin_top nocb: LengthPercentageAuto = LengthPercentageAuto::ZERO,
+    margin_right nocb: LengthPercentageAuto = LengthPercentageAuto::ZERO,
+    margin_bottom nocb: LengthPercentageAuto = LengthPercentageAuto::ZERO,
+    inset_left nocb: LengthPercentageAuto = LengthPercentageAuto::Auto,
+    inset_top nocb: LengthPercentageAuto = LengthPercentageAuto::Auto,
+    inset_right nocb: LengthPercentageAuto = LengthPercentageAuto::Auto,
+    inset_bottom nocb: LengthPercentageAuto = LengthPercentageAuto::Auto,
     z_index nocb: Option<i32> = None,
     cursor nocb: Option<CursorStyle> = None,
     color nocb: Option<Color> = None,
     background nocb: Option<Color> = None,
-    box_shadow nocb: Option<BoxShadow> = None,
+    box_shadows: Vec<BoxShadow> = Vec::new(),
     scroll_bar_color nocb: Option<Color> = None,
     scroll_bar_rounded nocb: Option<bool> = None,
-    scroll_bar_thickness nocb: Option<f32> = None,
-    scroll_bar_edge_width nocb: Option<f32> = None,
+    scroll_bar_thickness nocb: Option<Px> = None,
+    scroll_bar_edge_width nocb: Option<Px> = None,
     font_size nocb: Option<f32> = None,
     font_family nocb: Option<String> = None,
     font_weight nocb: Option<Weight> = None,
@@ -317,421 +188,289 @@ define_styles!(
 );
 
 impl Style {
-    pub fn width_px(self, width: f32) -> Self {
-        self.width(Dimension::Points(width))
-    }
-
-    pub fn width_pct(self, width: f32) -> Self {
-        self.width(Dimension::Percent(width / 100.0))
-    }
-
-    pub fn height_px(self, height: f32) -> Self {
-        self.height(Dimension::Points(height))
+    pub fn width(mut self, width: impl Into<PxOrPct>) -> Self {
+        self.width = match width.into() {
+            PxOrPct::Px(Px(px)) => Dimension::Points(px as f32),
+            PxOrPct::Pct(Pct(pct)) => Dimension::Percent(pct as f32 / 100.0),
+        };
+        self
     }
 
-    pub fn height_pct(self, height: f32) -> Self {
-        self.height(Dimension::Percent(height / 100.0))
+    pub fn height(mut self, height: impl Into<PxOrPct>) -> Self {
+        self.height = match height.into() {
+            PxOrPct::Px(Px(px)) => Dimension::Points(px as f32),
+            PxOrPct::Pct(Pct(pct)) => Dimension::Percent(pct as f32 / 100.0),
+        };
+        self
     }
 
-    pub fn size(
-        self,
-        width: impl Into<StyleValue<Dimension>>,
-        height: impl Into<StyleValue<Dimension>>,
-    ) -> Self {
+    pub fn size(self, width: impl Into<PxOrPct>, height: impl Into<PxOrPct>) -> Self {
         self.width(width).height(height)
     }
 
-    pub fn size_px(self, width: f32, height: f32) -> Self {
-        self.width_px(width).height_px(height)
-    }
-
-    pub fn size_pct(self, width: f32, height: f32) -> Self {
-        self.width_pct(width).height_pct(height)
-    }
-
-    pub fn min_width_px(self, min_width: f32) -> Self {
-        self.min_width(Dimension::Points(min_width))
-    }
-
-    pub fn min_width_pct(self, min_width: f32) -> Self {
-        self.min_width(Dimension::Percent(min_width / 100.0))
-    }
-
-    pub fn min_height_px(self, min_height: f32) -> Self {
-        self.min_height(Dimension::Points(min_height))
+    pub fn min_width(mut self, min_width: impl Into<PxOrPct>) -> Self {
+        self.min_width = match min_width.into() {
+            PxOrPct::Px(Px(px)) => Dimension::Points(px as f32),
+            PxOrPct::Pct(Pct(pct)) => Dimension::Percent(pct as f32 / 100.0),
+        };
+        self
     }
 
-    pub fn min_height_pct(self, min_height: f32) -> Self {
-        self.min_height(Dimension::Percent(min_height / 100.0))
+    pub fn min_height(mut self, min_height: impl Into<PxOrPct>) -> Self {
+        self.min_height = match min_height.into() {
+            PxOrPct::Px(Px(px)) => Dimension::Points(px as f32),
+            PxOrPct::Pct(Pct(pct)) => Dimension::Percent(pct as f32 / 100.0),
+        };
+        self
     }
 
-    pub fn min_size(
-        self,
-        min_width: impl Into<StyleValue<Dimension>>,
-        min_height: impl Into<StyleValue<Dimension>>,
-    ) -> Self {
+    pub fn min_size(self, min_width: impl Into<PxOrPct>, min_height: impl Into<PxOrPct>) -> Self {
         self.min_width(min_width).min_height(min_height)
     }
 
-    pub fn min_size_px(self, min_width: f32, min_height: f32) -> Self {
-        self.min_width_px(min_width).min_height_px(min_height)
-    }
-
-    pub fn min_size_pct(self, min_width: f32, min_height: f32) -> Self {
-        self.min_width_pct(min_width).min_height_pct(min_height)
-    }
-
-    pub fn max_width_px(self, max_width: f32) -> Self {
-        self.max_width(Dimension::Points(max_width))
-    }
-
-    pub fn max_width_pct(self, max_width: f32) -> Self {
-        self.max_width(Dimension::Percent(max_width / 100.0))
-    }
-
-    pub fn max_height_px(self, max_height: f32) -> Self {
-        self.max_height(Dimension::Points(max_height))
+    pub fn max_width(mut self, max_width: impl Into<PxOrPct>) -> Self {
+        self.max_width = match max_width.into() {
+            PxOrPct::Px(Px(px)) => Dimension::Points(px as f32),
+            PxOrPct::Pct(Pct(pct)) => Dimension::Percent(pct as f32 / 100.0),
+        };
+        self
     }
 
-    pub fn max_height_pct(self, max_height: f32) -> Self {
-        self.max_height(Dimension::Percent(max_height / 100.0))
+    pub fn max_height(mut self, max_height: impl Into<PxOrPct>) -> Self {
+        self.max_height = match max_height.into() {
+            PxOrPct::Px(Px(px)) => Dimension::Points(px as f32),
+            PxOrPct::Pct(Pct(pct)) => Dimension::Percent(pct as f32 / 100.0),
+        };
+        self
     }
 
-    pub fn max_size(
-        self,
-        max_width: impl Into<StyleValue<Dimension>>,
-        max_height: impl Into<StyleValue<Dimension>>,
-    ) -> Self {
+    pub fn max_size(self, max_width: impl Into<PxOrPct>, max_height: impl Into<PxOrPct>) -> Self {
         self.max_width(max_width).max_height(max_height)
     }
 
-    pub fn max_size_px(self, max_width: f32, max_height: f32) -> Self {
-        self.max_width_px(max_width).max_height_px(max_height)
-    }
-
-    pub fn max_size_pct(self, max_width: f32, max_height: f32) -> Self {
-        self.max_width_pct(max_width).max_height_pct(max_height)
-    }
-
-    pub fn border(self, border: f32) -> Self {
-        self.border_left(border)
-            .border_top(border)
-            .border_right(border)
-            .border_bottom(border)
+    pub fn border(mut self, border: impl Into<Px>) -> Self {
+        let border = border.into();
+        self.border_left = border;
+        self.border_top = border;
+        self.border_right = border;
+        self.border_bottom = border;
+        self
     }
 
     /// Sets `border_left` and `border_right` to `border`
-    pub fn border_horiz(self, border: f32) -> Self {
-        self.border_left(border).border_right(border)
+    pub fn border_horiz(mut self, border: impl Into<Px>) -> Self {
+        let border = border.into();
+        self.border_left = border;
+        self.border_right = border;
+        self
     }
 
     /// Sets `border_top` and `border_bottom` to `border`
-    pub fn border_vert(self, border: f32) -> Self {
-        self.border_top(border).border_bottom(border)
-    }
-
-    pub fn padding_left_px(self, padding: f32) -> Self {
-        self.padding_left(LengthPercentage::Points(padding))
-    }
-
-    pub fn padding_right_px(self, padding: f32) -> Self {
-        self.padding_right(LengthPercentage::Points(padding))
-    }
-
-    pub fn padding_top_px(self, padding: f32) -> Self {
-        self.padding_top(LengthPercentage::Points(padding))
-    }
-
-    pub fn padding_bottom_px(self, padding: f32) -> Self {
-        self.padding_bottom(LengthPercentage::Points(padding))
+    pub fn border_vert(mut self, border: impl Into<Px>) -> Self {
+        let border = border.into();
+        self.border_top = border;
+        self.border_bottom = border;
+        self
     }
 
-    pub fn padding_left_pct(self, padding: f32) -> Self {
-        self.padding_left(LengthPercentage::Percent(padding / 100.0))
+    pub fn padding_left(mut self, padding_left: impl Into<PxOrPct>) -> Self {
+        self.padding_left = match padding_left.into() {
+            PxOrPct::Px(Px(px)) => LengthPercentage::Points(px as f32),
+            PxOrPct::Pct(Pct(pct)) => LengthPercentage::Percent(pct as f32 / 100.0),
+        };
+        self
     }
 
-    pub fn padding_right_pct(self, padding: f32) -> Self {
-        self.padding_right(LengthPercentage::Percent(padding / 100.0))
+    pub fn padding_right(mut self, padding_right: impl Into<PxOrPct>) -> Self {
+        self.padding_right = match padding_right.into() {
+            PxOrPct::Px(Px(px)) => LengthPercentage::Points(px as f32),
+            PxOrPct::Pct(Pct(pct)) => LengthPercentage::Percent(pct as f32 / 100.0),
+        };
+        self
     }
 
-    pub fn padding_top_pct(self, padding: f32) -> Self {
-        self.padding_top(LengthPercentage::Percent(padding / 100.0))
+    pub fn padding_top(mut self, padding_top: impl Into<PxOrPct>) -> Self {
+        self.padding_top = match padding_top.into() {
+            PxOrPct::Px(Px(px)) => LengthPercentage::Points(px as f32),
+            PxOrPct::Pct(Pct(pct)) => LengthPercentage::Percent(pct as f32 / 100.0),
+        };
+        self
     }
 
-    pub fn padding_bottom_pct(self, padding: f32) -> Self {
-        self.padding_bottom(LengthPercentage::Percent(padding / 100.0))
+    pub fn padding_bottom(mut self, padding_bottom: impl Into<PxOrPct>) -> Self {
+        self.padding_bottom = match padding_bottom.into() {
+            PxOrPct::Px(Px(px)) => LengthPercentage::Points(px as f32),
+            PxOrPct::Pct(Pct(pct)) => LengthPercentage::Percent(pct as f32 / 100.0),
+        };
+        self
     }
 
     /// Set padding on all directions
-    pub fn padding_px(self, padding: f32) -> Self {
-        self.padding_left_px(padding)
-            .padding_top_px(padding)
-            .padding_right_px(padding)
-            .padding_bottom_px(padding)
-    }
-
-    pub fn padding_pct(self, padding: f32) -> Self {
-        self.padding_left_pct(padding)
-            .padding_top_pct(padding)
-            .padding_right_pct(padding)
-            .padding_bottom_pct(padding)
+    pub fn padding(self, padding: impl Into<PxOrPct>) -> Self {
+        let padding = padding.into();
+        self.padding_left(padding)
+            .padding_top(padding)
+            .padding_right(padding)
+            .padding_bottom(padding)
     }
 
     /// Sets `padding_left` and `padding_right` to `padding`
-    pub fn padding_horiz_px(self, padding: f32) -> Self {
-        self.padding_left_px(padding).padding_right_px(padding)
-    }
-
-    pub fn padding_horiz_pct(self, padding: f32) -> Self {
-        self.padding_left_pct(padding).padding_right_pct(padding)
+    pub fn padding_horiz(self, padding: impl Into<PxOrPct>) -> Self {
+        let padding = padding.into();
+        self.padding_left(padding).padding_right(padding)
     }
 
     /// Sets `padding_top` and `padding_bottom` to `padding`
-    pub fn padding_vert_px(self, padding: f32) -> Self {
-        self.padding_top_px(padding).padding_bottom_px(padding)
-    }
-
-    pub fn padding_vert_pct(self, padding: f32) -> Self {
-        self.padding_top_pct(padding).padding_bottom_pct(padding)
+    pub fn padding_vert(self, padding: impl Into<PxOrPct>) -> Self {
+        let padding = padding.into();
+        self.padding_top(padding).padding_bottom(padding)
     }
 
-    pub fn margin_left_px(self, margin: f32) -> Self {
-        self.margin_left(LengthPercentageAuto::Points(margin))
-    }
-
-    pub fn margin_right_px(self, margin: f32) -> Self {
-        self.margin_right(LengthPercentageAuto::Points(margin))
-    }
-
-    pub fn margin_top_px(self, margin: f32) -> Self {
-        self.margin_top(LengthPercentageAuto::Points(margin))
-    }
-
-    pub fn margin_bottom_px(self, margin: f32) -> Self {
-        self.margin_bottom(LengthPercentageAuto::Points(margin))
-    }
-
-    pub fn margin_left_pct(self, margin: f32) -> Self {
-        self.margin_left(LengthPercentageAuto::Percent(margin / 100.0))
-    }
-
-    pub fn margin_right_pct(self, margin: f32) -> Self {
-        self.margin_right(LengthPercentageAuto::Percent(margin / 100.0))
+    pub fn margin_left(mut self, margin_left: impl Into<PxOrPct>) -> Self {
+        self.margin_left = match margin_left.into() {
+            PxOrPct::Px(Px(px)) => LengthPercentageAuto::Points(px as f32),
+            PxOrPct::Pct(Pct(pct)) => LengthPercentageAuto::Percent(pct as f32 / 100.0),
+        };
+        self
     }
 
-    pub fn margin_top_pct(self, margin: f32) -> Self {
-        self.margin_top(LengthPercentageAuto::Percent(margin / 100.0))
+    pub fn margin_right(mut self, margin_right: impl Into<PxOrPct>) -> Self {
+        self.margin_right = match margin_right.into() {
+            PxOrPct::Px(Px(px)) => LengthPercentageAuto::Points(px as f32),
+            PxOrPct::Pct(Pct(pct)) => LengthPercentageAuto::Percent(pct as f32 / 100.0),
+        };
+        self
     }
 
-    pub fn margin_bottom_pct(self, margin: f32) -> Self {
-        self.margin_bottom(LengthPercentageAuto::Percent(margin / 100.0))
+    pub fn margin_top(mut self, margin_top: impl Into<PxOrPct>) -> Self {
+        self.margin_top = match margin_top.into() {
+            PxOrPct::Px(Px(px)) => LengthPercentageAuto::Points(px as f32),
+            PxOrPct::Pct(Pct(pct)) => LengthPercentageAuto::Percent(pct as f32 / 100.0),
+        };
+        self
     }
 
-    pub fn margin_px(self, margin: f32) -> Self {
-        self.margin_left_px(margin)
-            .margin_top_px(margin)
-            .margin_right_px(margin)
-            .margin_bottom_px(margin)
+    pub fn margin_bottom(mut self, margin_bottom: impl Into<PxOrPct>) -> Self {
+        self.margin_bottom = match margin_bottom.into() {
+            PxOrPct::Px(Px(px)) => LengthPercentageAuto::Points(px as f32),
+            PxOrPct::Pct(Pct(pct)) => LengthPercentageAuto::Percent(pct as f32 / 100.0),
+        };
+        self
     }
 
-    pub fn margin_pct(self, margin: f32) -> Self {
-        self.margin_left_pct(margin)
-            .margin_top_pct(margin)
-            .margin_right_pct(margin)
-            .margin_bottom_pct(margin)
+    /// Set margin on all directions
+    pub fn margin(self, margin: impl Into<PxOrPct>) -> Self {
+        let margin = margin.into();
+        self.margin_left(margin)
+            .margin_top(margin)
+            .margin_right(margin)
+            .margin_bottom(margin)
     }
 
     /// Sets `margin_left` and `margin_right` to `margin`
-    pub fn margin_horiz_px(self, margin: f32) -> Self {
-        self.margin_left_px(margin).margin_right_px(margin)
-    }
-
-    pub fn margin_horiz_pct(self, margin: f32) -> Self {
-        self.margin_left_pct(margin).margin_right_pct(margin)
+    pub fn margin_horiz(self, margin: impl Into<PxOrPct>) -> Self {
+        let margin = margin.into();
+        self.margin_left(margin).margin_right(margin)
     }
 
     /// Sets `margin_top` and `margin_bottom` to `margin`
-    pub fn margin_vert_px(self, margin: f32) -> Self {
-        self.margin_top_px(margin).margin_bottom_px(margin)
-    }
-
-    pub fn margin_vert_pct(self, margin: f32) -> Self {
-        self.margin_top_pct(margin).margin_bottom_pct(margin)
-    }
-
-    pub fn inset_left_px(self, inset: f32) -> Self {
-        self.inset_left(LengthPercentageAuto::Points(inset))
-    }
-
-    pub fn inset_right_px(self, inset: f32) -> Self {
-        self.inset_right(LengthPercentageAuto::Points(inset))
-    }
-
-    pub fn inset_top_px(self, inset: f32) -> Self {
-        self.inset_top(LengthPercentageAuto::Points(inset))
-    }
-
-    pub fn inset_bottom_px(self, inset: f32) -> Self {
-        self.inset_bottom(LengthPercentageAuto::Points(inset))
-    }
-
-    pub fn inset_left_pct(self, inset: f32) -> Self {
-        self.inset_left(LengthPercentageAuto::Percent(inset / 100.0))
-    }
-
-    pub fn inset_right_pct(self, inset: f32) -> Self {
-        self.inset_right(LengthPercentageAuto::Percent(inset / 100.0))
-    }
-
-    pub fn inset_top_pct(self, inset: f32) -> Self {
-        self.inset_top(LengthPercentageAuto::Percent(inset / 100.0))
-    }
-
-    pub fn inset_bottom_pct(self, inset: f32) -> Self {
-        self.inset_bottom(LengthPercentageAuto::Percent(inset / 100.0))
-    }
-
-    pub fn inset_px(self, inset: f32) -> Self {
-        self.inset_left_px(inset)
-            .inset_top_px(inset)
-            .inset_right_px(inset)
-            .inset_bottom_px(inset)
+    pub fn margin_vert(self, margin: impl Into<PxOrPct>) -> Self {
+        let margin = margin.into();
+        self.margin_top(margin).margin_bottom(margin)
     }
 
-    pub fn inset_pct(self, inset: f32) -> Self {
-        self.inset_left_pct(inset)
-            .inset_top_pct(inset)
-            .inset_right_pct(inset)
-            .inset_bottom_pct(inset)
-    }
-
-    pub fn cursor(mut self, cursor: impl Into<StyleValue<CursorStyle>>) -> Self {
-        self.cursor = cursor.into().map(Some);
+    pub fn inset_left(mut self, inset_left: impl Into<PxOrPct>) -> Self {
+        self.inset_left = match inset_left.into() {
+            PxOrPct::Px(Px(px)) => LengthPercentageAuto::Points(px as f32),
+            PxOrPct::Pct(Pct(pct)) => LengthPercentageAuto::Percent(pct as f32 / 100.0),
+        };
         self
     }
 
-    pub fn color(mut self, color: impl Into<StyleValue<Color>>) -> Self {
-        self.color = color.into().map(Some);
+    pub fn inset_right(mut self, inset_right: impl Into<PxOrPct>) -> Self {
+        self.inset_right = match inset_right.into() {
+            PxOrPct::Px(Px(px)) => LengthPercentageAuto::Points(px as f32),
+            PxOrPct::Pct(Pct(pct)) => LengthPercentageAuto::Percent(pct as f32 / 100.0),
+        };
         self
     }
 
-    pub fn background(mut self, color: impl Into<StyleValue<Color>>) -> Self {
-        self.background = color.into().map(Some);
+    pub fn inset_top(mut self, inset_top: impl Into<PxOrPct>) -> Self {
+        self.inset_top = match inset_top.into() {
+            PxOrPct::Px(Px(px)) => LengthPercentageAuto::Points(px as f32),
+            PxOrPct::Pct(Pct(pct)) => LengthPercentageAuto::Percent(pct as f32 / 100.0),
+        };
         self
     }
 
-    pub fn box_shadow_blur(mut self, blur_radius: f64) -> Self {
-        if let Some(box_shadow) = self.box_shadow.as_mut() {
-            if let Some(box_shadow) = box_shadow.as_mut() {
-                box_shadow.blur_radius = blur_radius;
-                return self;
-            }
-        }
-
-        self.box_shadow = Some(BoxShadow {
-            blur_radius,
-            ..Default::default()
-        })
-        .into();
+    pub fn inset_bottom(mut self, inset_bottom: impl Into<PxOrPct>) -> Self {
+        self.inset_bottom = match inset_bottom.into() {
+            PxOrPct::Px(Px(px)) => LengthPercentageAuto::Points(px as f32),
+            PxOrPct::Pct(Pct(pct)) => LengthPercentageAuto::Percent(pct as f32 / 100.0),
+        };
         self
     }
 
-    pub fn box_shadow_color(mut self, color: Color) -> Self {
-        if let Some(box_shadow) = self.box_shadow.as_mut() {
-            if let Some(box_shadow) = box_shadow.as_mut() {
-                box_shadow.color = color;
-                return self;
-            }
-        }
+    /// Set inset on all directions
+    pub fn inset(self, inset: impl Into<PxOrPct>) -> Self {
+        let inset = inset.into();
+        self.inset_left(inset)
+            .inset_top(inset)
+            .inset_right(inset)
+            .inset_bottom(inset)
+    }
 
-        self.box_shadow = Some(BoxShadow {
-            color,
-            ..Default::default()
-        })
-        .into();
+    pub fn cursor(mut self, cursor: CursorStyle) -> Self {
+        self.cursor = Some(cursor);
         self
     }
 
-    pub fn box_shadow_spread(mut self, spread: f64) -> Self {
-        if let Some(box_shadow) = self.box_shadow.as_mut() {
-            if let Some(box_shadow) = box_shadow.as_mut() {
-                box_shadow.spread = spread;
-                return self;
-            }
-        }
-
-        self.box_shadow = Some(BoxShadow {
-            spread,
-            ..Default::default()
-        })
-        .into();
+    pub fn color(mut self, color: impl Into<Color>) -> Self {
+        self.color = Some(color.into());
         self
     }
 
-    pub fn box_shadow_h_offset(mut self, h_offset: f64) -> Self {
-        if let Some(box_shadow) = self.box_shadow.as_mut() {
-            if let Some(box_shadow) = box_shadow.as_mut() {
-                box_shadow.h_offset = h_offset;
-                return self;
-            }
-        }
-
-        self.box_shadow = Some(BoxShadow {
-            h_offset,
-            ..Default::default()
-        })
-        .into();
+    pub fn background(mut self, color: impl Into<Color>) -> Self {
+        self.background = Some(color.into());
         self
     }
 
-    pub fn box_shadow_v_offset(mut self, v_offset: f64) -> Self {
-        if let Some(box_shadow) = self.box_shadow.as_mut() {
-            if let Some(box_shadow) = box_shadow.as_mut() {
-                box_shadow.v_offset = v_offset;
-                return self;
-            }
-        }
-
-        self.box_shadow = Some(BoxShadow {
-            v_offset,
-            ..Default::default()
-        })
-        .into();
-        self
+    pub fn box_shadow(self, box_shadow: BoxShadow) -> Self {
+        self.box_shadows(vec![box_shadow])
     }
 
-    pub fn scroll_bar_color(mut self, color: impl Into<StyleValue<Color>>) -> Self {
-        self.scroll_bar_color = color.into().map(Some);
+    pub fn scroll_bar_color(mut self, color: impl Into<Color>) -> Self {
+        self.scroll_bar_color = Some(color.into());
         self
     }
 
-    pub fn scroll_bar_rounded(mut self, rounded: impl Into<StyleValue<bool>>) -> Self {
-        self.scroll_bar_rounded = rounded.into().map(Some);
+    pub fn scroll_bar_rounded(mut self, rounded: bool) -> Self {
+        self.scroll_bar_rounded = Some(rounded);
         self
     }
 
-    pub fn scroll_bar_thickness(mut self, thickness: impl Into<StyleValue<f32>>) -> Self {
-        self.scroll_bar_thickness = thickness.into().map(Some);
+    pub fn scroll_bar_thickness(mut self, thickness: impl Into<Px>) -> Self {
+        self.scroll_bar_thickness = Some(thickness.into());
         self
     }
 
-    pub fn scroll_bar_edge_width(mut self, edge_width: impl Into<StyleValue<f32>>) -> Self {
-        self.scroll_bar_edge_width = edge_width.into().map(Some);
+    pub fn scroll_bar_edge_width(mut self, edge_width: impl Into<Px>) -> Self {
+        self.scroll_bar_edge_width = Some(edge_width.into());
         self
     }
 
-    pub fn font_size(mut self, size: impl Into<StyleValue<f32>>) -> Self {
-        self.font_size = size.into().map(Some);
+    pub fn font_size(mut self, size: impl Into<f32>) -> Self {
+        self.font_size = Some(size.into());
         self
     }
 
-    pub fn font_family(mut self, family: impl Into<StyleValue<String>>) -> Self {
-        self.font_family = family.into().map(Some);
+    pub fn font_family(mut self, family: impl Into<String>) -> Self {
+        self.font_family = Some(family.into());
         self
     }
 
-    pub fn font_weight(mut self, weight: impl Into<StyleValue<Weight>>) -> Self {
-        self.font_weight = weight.into().map(Some);
+    pub fn font_weight(mut self, weight: impl Into<Weight>) -> Self {
+        self.font_weight = Some(weight.into());
         self
     }
 
@@ -739,85 +478,103 @@ impl Style {
         self.font_weight(Weight::BOLD)
     }
 
-    pub fn font_style(mut self, style: impl Into<StyleValue<FontStyle>>) -> Self {
-        self.font_style = style.into().map(Some);
+    pub fn font_style(mut self, style: impl Into<FontStyle>) -> Self {
+        self.font_style = Some(style.into());
         self
     }
 
-    pub fn cursor_color(mut self, color: impl Into<StyleValue<Color>>) -> Self {
-        self.cursor_color = color.into().map(Some);
+    pub fn cursor_color(mut self, color: impl Into<Color>) -> Self {
+        self.cursor_color = Some(color.into());
         self
     }
 
     pub fn line_height(mut self, normal: f32) -> Self {
-        self.line_height = Some(LineHeightValue::Normal(normal)).into();
+        self.line_height = Some(LineHeightValue::Normal(normal));
         self
     }
 
-    pub fn text_ellipsis(self) -> Self {
-        self.text_overflow(TextOverflow::Ellipsis)
+    pub fn text_ellipsis(mut self) -> Self {
+        self.text_overflow = TextOverflow::Ellipsis;
+        self
     }
 
-    pub fn text_clip(self) -> Self {
-        self.text_overflow(TextOverflow::Clip)
+    pub fn text_clip(mut self) -> Self {
+        self.text_overflow = TextOverflow::Clip;
+        self
     }
 
-    pub fn absolute(self) -> Self {
-        self.position(Position::Absolute)
+    pub fn absolute(mut self) -> Self {
+        self.position = Position::Absolute;
+        self
     }
 
-    pub fn items_start(self) -> Self {
-        self.align_items(Some(AlignItems::FlexStart))
+    pub fn items_start(mut self) -> Self {
+        self.align_items = Some(AlignItems::FlexStart);
+        self
     }
 
     /// Defines the alignment along the cross axis as Centered
-    pub fn items_center(self) -> Self {
-        self.align_items(Some(AlignItems::Center))
+    pub fn items_center(mut self) -> Self {
+        self.align_items = Some(AlignItems::Center);
+        self
     }
 
-    pub fn items_end(self) -> Self {
-        self.align_items(Some(AlignItems::FlexEnd))
+    pub fn items_end(mut self) -> Self {
+        self.align_items = Some(AlignItems::FlexEnd);
+        self
     }
 
     /// Defines the alignment along the main axis as Centered
-    pub fn justify_center(self) -> Self {
-        self.justify_content(Some(JustifyContent::Center))
+    pub fn justify_center(mut self) -> Self {
+        self.justify_content = Some(JustifyContent::Center);
+        self
     }
 
-    pub fn justify_end(self) -> Self {
-        self.justify_content(Some(JustifyContent::FlexEnd))
+    pub fn justify_end(mut self) -> Self {
+        self.justify_content = Some(JustifyContent::FlexEnd);
+        self
     }
 
-    pub fn justify_start(self) -> Self {
-        self.justify_content(Some(JustifyContent::FlexStart))
+    pub fn justify_start(mut self) -> Self {
+        self.justify_content = Some(JustifyContent::FlexStart);
+        self
     }
 
-    pub fn justify_between(self) -> Self {
-        self.justify_content(Some(JustifyContent::SpaceBetween))
+    pub fn justify_between(mut self) -> Self {
+        self.justify_content = Some(JustifyContent::SpaceBetween);
+        self
     }
 
-    pub fn hide(self) -> Self {
-        self.display(Display::None)
+    pub fn hide(mut self) -> Self {
+        self.display = Display::None;
+        self
     }
 
-    pub fn flex(self) -> Self {
-        self.display(Display::Flex)
+    pub fn flex(mut self) -> Self {
+        self.display = Display::Flex;
+        self
     }
 
-    pub fn flex_basis_px(self, pt: f32) -> Self {
-        self.flex_basis(Dimension::Points(pt))
+    pub fn flex_basis(mut self, basis: impl Into<PxOrPct>) -> Self {
+        match basis.into() {
+            PxOrPct::Px(Px(px)) => self.flex_basis = Dimension::Points(px as f32),
+            PxOrPct::Pct(Pct(pct)) => self.flex_basis = Dimension::Percent(pct as f32 / 100.0),
+        }
+        self
     }
 
-    pub fn flex_row(self) -> Self {
-        self.flex_direction(FlexDirection::Row)
+    pub fn flex_row(mut self) -> Self {
+        self.flex_direction = FlexDirection::Row;
+        self
     }
 
-    pub fn flex_col(self) -> Self {
-        self.flex_direction(FlexDirection::Column)
+    pub fn flex_col(mut self) -> Self {
+        self.flex_direction = FlexDirection::Column;
+        self
     }
 
     pub fn z_index(mut self, z_index: i32) -> Self {
-        self.z_index = Some(z_index).into();
+        self.z_index = Some(z_index);
         self
     }
 
@@ -854,7 +611,7 @@ impl Style {
     }
 }
 
-impl ComputedStyle {
+impl Style {
     pub fn to_taffy_style(&self) -> TaffyStyle {
         TaffyStyle {
             display: self.display,
@@ -883,10 +640,10 @@ impl ComputedStyle {
             align_self: self.align_self,
             aspect_ratio: self.aspect_ratio,
             border: Rect {
-                left: LengthPercentage::Points(self.border_left),
-                top: LengthPercentage::Points(self.border_top),
-                right: LengthPercentage::Points(self.border_right),
-                bottom: LengthPercentage::Points(self.border_bottom),
+                left: LengthPercentage::Points(self.border_left.0 as f32),
+                top: LengthPercentage::Points(self.border_top.0 as f32),
+                right: LengthPercentage::Points(self.border_right.0 as f32),
+                bottom: LengthPercentage::Points(self.border_bottom.0 as f32),
             },
             padding: Rect {
                 left: self.padding_left,
@@ -912,82 +669,98 @@ impl ComputedStyle {
     }
 }
 
+pub mod short {
+    use peniko::Color;
+
+    use super::Style;
+    use crate::unit::PxOrPct;
+
+    impl Style {
+        pub fn p(self, p: impl Into<PxOrPct>) -> Self {
+            self.padding(p)
+        }
+
+        pub fn px(self, p: impl Into<PxOrPct>) -> Self {
+            self.padding_horiz(p)
+        }
+
+        pub fn py(self, p: impl Into<PxOrPct>) -> Self {
+            self.padding_vert(p)
+        }
+
+        pub fn pl(self, p: impl Into<PxOrPct>) -> Self {
+            self.padding_left(p)
+        }
+
+        pub fn pr(self, p: impl Into<PxOrPct>) -> Self {
+            self.padding_right(p)
+        }
+
+        pub fn pt(self, p: impl Into<PxOrPct>) -> Self {
+            self.padding_top(p)
+        }
+
+        pub fn pb(self, p: impl Into<PxOrPct>) -> Self {
+            self.padding_bottom(p)
+        }
+
+        pub fn m(self, m: impl Into<PxOrPct>) -> Self {
+            self.margin(m)
+        }
+
+        pub fn mx(self, m: impl Into<PxOrPct>) -> Self {
+            self.margin_horiz(m)
+        }
+
+        pub fn my(self, m: impl Into<PxOrPct>) -> Self {
+            self.margin_vert(m)
+        }
+
+        pub fn ml(self, m: impl Into<PxOrPct>) -> Self {
+            self.margin_left(m)
+        }
+
+        pub fn mr(self, m: impl Into<PxOrPct>) -> Self {
+            self.margin_right(m)
+        }
+
+        pub fn mt(self, m: impl Into<PxOrPct>) -> Self {
+            self.margin_top(m)
+        }
+
+        pub fn mb(self, m: impl Into<PxOrPct>) -> Self {
+            self.margin_bottom(m)
+        }
+
+        pub fn bg(self: Style, color: impl Into<Color>) -> Style {
+            self.background(color)
+        }
+    }
+}
+
+pub use short::*;
+
 #[cfg(test)]
 mod tests {
     use taffy::style::LengthPercentage;
 
-    use super::{Style, StyleValue};
+    use super::Style;
 
     #[test]
     fn style_override() {
-        let style1 = Style::BASE.padding_left_px(32.0);
-        let style2 = Style::BASE.padding_left_px(64.0);
-
-        let style = style1.apply(style2);
-
-        assert_eq!(
-            style.padding_left,
-            StyleValue::Val(LengthPercentage::Points(64.0))
-        );
-
-        let style1 = Style::BASE.padding_left_px(32.0).padding_bottom_px(45.0);
-        let style2 = Style::BASE
-            .padding_left_px(64.0)
-            .padding_bottom(StyleValue::Base);
-
-        let style = style1.apply(style2);
-
-        assert_eq!(
-            style.padding_left,
-            StyleValue::Val(LengthPercentage::Points(64.0))
-        );
-        assert_eq!(
-            style.padding_bottom,
-            StyleValue::Val(LengthPercentage::Points(45.0))
-        );
-
-        let style1 = Style::BASE.padding_left_px(32.0).padding_bottom_px(45.0);
-        let style2 = Style::BASE
-            .padding_left(LengthPercentage::Points(64.0))
-            .padding_bottom(StyleValue::Unset);
-
-        let style = style1.apply(style2);
-
-        assert_eq!(
-            style.padding_left,
-            StyleValue::Val(LengthPercentage::Points(64.0))
-        );
-        assert_eq!(style.padding_bottom, StyleValue::Unset);
-
-        let style1 = Style::BASE.padding_left_px(32.0).padding_bottom_px(45.0);
-        let style2 = Style::BASE
-            .padding_left_px(64.0)
-            .padding_bottom(StyleValue::Unset);
-        let style3 = Style::BASE.padding_bottom(StyleValue::Base);
-
-        let style = style1.apply_overriding_styles([style2, style3].into_iter());
-
-        assert_eq!(
-            style.padding_left,
-            StyleValue::Val(LengthPercentage::Points(64.0))
-        );
-        assert_eq!(style.padding_bottom, StyleValue::Unset);
-
-        let style1 = Style::BASE.padding_left_px(32.0).padding_bottom_px(45.0);
-        let style2 = Style::BASE
-            .padding_left(LengthPercentage::Points(64.0))
-            .padding_bottom(StyleValue::Unset);
-        let style3 = Style::BASE.padding_bottom(StyleValue::Val(LengthPercentage::Points(100.0)));
-
-        let style = style1.apply_overriding_styles([style2, style3].into_iter());
-
-        assert_eq!(
-            style.padding_left,
-            StyleValue::Val(LengthPercentage::Points(64.0))
-        );
-        assert_eq!(
-            style.padding_bottom,
-            StyleValue::Val(LengthPercentage::Points(100.0))
-        );
+        let style_fn1 = |s: Style| s.padding_left(32.0);
+        let style_fn2 = |s: Style| s.padding_left(64.0);
+
+        let style = style_fn2(style_fn1(Style::default()));
+
+        assert_eq!(style.padding_left, LengthPercentage::Points(64.0));
+
+        let style_fn1 = |s: Style| s.padding_left(32.0).padding_bottom(45.0);
+        let style_fn2 = |s: Style| s.padding_left(64.0);
+
+        let style = style_fn2(style_fn1(Style::default()));
+
+        assert_eq!(style.padding_left, LengthPercentage::Points(64.0));
+        assert_eq!(style.padding_bottom, LengthPercentage::Points(45.0));
     }
 }
diff --git a/src/unit.rs b/src/unit.rs
new file mode 100644
index 00000000..699d78af
--- /dev/null
+++ b/src/unit.rs
@@ -0,0 +1,53 @@
+#[derive(Debug, Clone, Copy)]
+pub struct Px(pub f64);
+
+#[derive(Debug, Clone, Copy)]
+pub struct Pct(pub f64);
+
+impl From<f64> for Px {
+    fn from(value: f64) -> Self {
+        Px(value)
+    }
+}
+
+impl From<f32> for Px {
+    fn from(value: f32) -> Self {
+        Px(value as f64)
+    }
+}
+
+impl From<i32> for Px {
+    fn from(value: i32) -> Self {
+        Px(value as f64)
+    }
+}
+
+#[derive(Debug, Clone, Copy)]
+pub enum PxOrPct {
+    Px(Px),
+    Pct(Pct),
+}
+
+impl From<Pct> for PxOrPct {
+    fn from(value: Pct) -> Self {
+        PxOrPct::Pct(value)
+    }
+}
+
+impl<T> From<T> for PxOrPct
+where
+    T: Into<Px>,
+{
+    fn from(value: T) -> Self {
+        PxOrPct::Px(value.into())
+    }
+}
+
+impl PxOrPct {
+    pub fn px(value: f64) -> Self {
+        PxOrPct::Px(Px(value))
+    }
+    pub fn pct(value: f64) -> Self {
+        PxOrPct::Pct(Pct(value))
+    }
+}
diff --git a/src/update.rs b/src/update.rs
index 4d024e0e..c0f299e4 100644
--- a/src/update.rs
+++ b/src/update.rs
@@ -10,7 +10,7 @@ use crate::{
     id::Id,
     menu::Menu,
     responsive::ScreenSize,
-    style::{Style, StyleSelector},
+    style::{StyleFn, StyleSelector},
 };
 
 thread_local! {
@@ -47,21 +47,25 @@ pub(crate) enum UpdateMessage {
     },
     BaseStyle {
         id: Id,
-        style: Style,
+        style: Box<dyn StyleFn>,
     },
     Style {
         id: Id,
-        style: Style,
+        style: Box<dyn StyleFn>,
+    },
+    OverrideStyle {
+        id: Id,
+        style: Box<dyn StyleFn>,
     },
     ResponsiveStyle {
         id: Id,
-        style: Style,
+        style: Box<dyn StyleFn>,
         size: ScreenSize,
     },
     StyleSelector {
         id: Id,
         selector: StyleSelector,
-        style: Style,
+        style: Box<dyn StyleFn>,
     },
     KeyboardNavigable {
         id: Id,
diff --git a/src/view.rs b/src/view.rs
index 02718eed..5e14aa25 100644
--- a/src/view.rs
+++ b/src/view.rs
@@ -26,7 +26,7 @@
 //! pub fn label_and_input() -> impl View {
 //!     let text = create_rw_signal("Hello world".to_string());
 //!     stack(|| (text_input(text), label(|| text.get())))
-//!         .style(|| Style::BASE.padding_px(10.0))
+//!         .style(|| Style::BASE.padding(10.0))
 //! }
 //! ```
 //!
@@ -95,7 +95,7 @@ use crate::{
     context::{AppState, DragState, EventCx, LayoutCx, PaintCx, UpdateCx},
     event::{Event, EventListener},
     id::Id,
-    style::{ComputedStyle, Style},
+    style::{BoxShadow, Style},
 };
 
 bitflags! {
@@ -112,10 +112,6 @@ bitflags! {
 pub trait View {
     fn id(&self) -> Id;
 
-    fn view_style(&self) -> Option<Style> {
-        None
-    }
-
     fn child(&self, id: Id) -> Option<&dyn View>;
 
     fn child_mut(&mut self, id: Id) -> Option<&mut dyn View>;
@@ -192,8 +188,7 @@ pub trait View {
     fn layout_main(&mut self, cx: &mut LayoutCx) -> Node {
         cx.save();
 
-        let view_style = self.view_style();
-        cx.app_state_mut().compute_style(self.id(), view_style);
+        cx.app_state_mut().compute_style(self.id());
         let style = cx.app_state_mut().get_computed_style(self.id()).clone();
 
         if style.color.is_some() {
@@ -206,10 +201,10 @@ pub trait View {
             cx.scroll_bar_rounded = style.scroll_bar_rounded;
         }
         if style.scroll_bar_thickness.is_some() {
-            cx.scroll_bar_thickness = style.scroll_bar_thickness;
+            cx.scroll_bar_thickness = style.scroll_bar_thickness.map(|v| v.0 as f32);
         }
         if style.scroll_bar_edge_width.is_some() {
-            cx.scroll_bar_edge_width = style.scroll_bar_edge_width;
+            cx.scroll_bar_edge_width = style.scroll_bar_edge_width.map(|v| v.0 as f32);
         }
         if style.font_size.is_some() {
             cx.font_size = style.font_size;
@@ -687,10 +682,10 @@ pub trait View {
                 cx.scroll_bar_rounded = style.scroll_bar_rounded;
             }
             if style.scroll_bar_thickness.is_some() {
-                cx.scroll_bar_thickness = style.scroll_bar_thickness;
+                cx.scroll_bar_thickness = style.scroll_bar_thickness.map(|v| v.0 as f32);
             }
             if style.scroll_bar_edge_width.is_some() {
-                cx.scroll_bar_edge_width = style.scroll_bar_edge_width;
+                cx.scroll_bar_edge_width = style.scroll_bar_edge_width.map(|v| v.0 as f32);
             }
             if style.font_size.is_some() {
                 cx.font_size = style.font_size;
@@ -746,12 +741,8 @@ pub trait View {
 
                     let style = cx.app_state.get_computed_style(id).clone();
                     let view_state = cx.app_state.view_state(id);
-                    let style = if let Some(dragging_style) = view_state.dragging_style.clone() {
-                        view_state
-                            .combined_style
-                            .clone()
-                            .apply(dragging_style)
-                            .compute(&ComputedStyle::default())
+                    let style = if let Some(dragging_style) = &view_state.dragging_style {
+                        dragging_style.call(view_state.computed_style.clone())
                     } else {
                         style
                     };
@@ -780,8 +771,8 @@ pub trait View {
     fn paint(&mut self, cx: &mut PaintCx);
 }
 
-fn paint_bg(cx: &mut PaintCx, style: &ComputedStyle, size: Size) {
-    let radius = style.border_radius;
+fn paint_bg(cx: &mut PaintCx, style: &Style, size: Size) {
+    let radius = style.border_radius.0;
     if radius > 0.0 {
         let rect = size.to_rect();
         let width = rect.width();
@@ -795,7 +786,9 @@ fn paint_bg(cx: &mut PaintCx, style: &ComputedStyle, size: Size) {
             };
             cx.fill(&circle, bg, 0.0);
         } else {
-            paint_box_shadow(cx, style, rect, Some(radius as f64));
+            for bs in &style.box_shadows {
+                paint_box_shadow(cx, bs, rect, Some(radius));
+            }
             let bg = match style.background {
                 Some(color) => color,
                 None => return,
@@ -804,7 +797,9 @@ fn paint_bg(cx: &mut PaintCx, style: &ComputedStyle, size: Size) {
             cx.fill(&rounded_rect, bg, 0.0);
         }
     } else {
-        paint_box_shadow(cx, style, size.to_rect(), None);
+        for bs in &style.box_shadows {
+            paint_box_shadow(cx, bs, size.to_rect(), None);
+        }
         let bg = match style.background {
             Some(color) => color,
             None => return,
@@ -813,53 +808,54 @@ fn paint_bg(cx: &mut PaintCx, style: &ComputedStyle, size: Size) {
     }
 }
 
-fn paint_box_shadow(cx: &mut PaintCx, style: &ComputedStyle, rect: Rect, rect_radius: Option<f64>) {
-    if let Some(shadow) = style.box_shadow.as_ref() {
-        let inset = Insets::new(
-            -shadow.h_offset / 2.0,
-            -shadow.v_offset / 2.0,
-            shadow.h_offset / 2.0,
-            shadow.v_offset / 2.0,
-        );
-        let rect = rect.inflate(shadow.spread, shadow.spread).inset(inset);
-        if let Some(radii) = rect_radius {
-            let rounded_rect = RoundedRect::from_rect(rect, radii + shadow.spread);
-            cx.fill(&rounded_rect, shadow.color, shadow.blur_radius);
-        } else {
-            cx.fill(&rect, shadow.color, shadow.blur_radius);
-        }
+fn paint_box_shadow(
+    cx: &mut PaintCx,
+    box_shadow: &BoxShadow,
+    rect: Rect,
+    rect_radius: Option<f64>,
+) {
+    let inset = Insets::new(
+        -box_shadow.h_offset.0 / 2.0,
+        -box_shadow.v_offset.0 / 2.0,
+        box_shadow.h_offset.0 / 2.0,
+        box_shadow.v_offset.0 / 2.0,
+    );
+    let rect = rect
+        .inflate(box_shadow.spread.0, box_shadow.spread.0)
+        .inset(inset);
+    if let Some(radius) = rect_radius {
+        let rounded_rect = RoundedRect::from_rect(rect, radius + box_shadow.spread.0);
+        cx.fill(&rounded_rect, box_shadow.color, box_shadow.blur_radius.0);
+    } else {
+        cx.fill(&rect, box_shadow.color, box_shadow.blur_radius.0);
     }
 }
 
-fn paint_outline(cx: &mut PaintCx, style: &ComputedStyle, size: Size) {
-    if style.outline == 0. {
+fn paint_outline(cx: &mut PaintCx, style: &Style, size: Size) {
+    if style.outline.0 == 0. {
         // TODO: we should warn! when outline is < 0
         return;
     }
-    let half = style.outline as f64 / 2.0;
+    let half = style.outline.0 / 2.0;
     let rect = size.to_rect().inflate(half, half);
-    cx.stroke(&rect, style.outline_color, style.outline as f64);
+    cx.stroke(&rect, style.outline_color, style.outline.0);
 }
 
-fn paint_border(cx: &mut PaintCx, style: &ComputedStyle, size: Size) {
-    let left = style.border_left;
-    let top = style.border_top;
-    let right = style.border_right;
-    let bottom = style.border_bottom;
+fn paint_border(cx: &mut PaintCx, style: &Style, size: Size) {
+    let left = style.border_left.0;
+    let top = style.border_top.0;
+    let right = style.border_right.0;
+    let bottom = style.border_bottom.0;
 
     let border_color = style.border_color;
     if left == top && top == right && right == bottom && bottom == left && left > 0.0 {
-        let half = left as f64 / 2.0;
+        let half = left / 2.0;
         let rect = size.to_rect().inflate(-half, -half);
-        let radius = style.border_radius;
+        let radius = style.border_radius.0;
         if radius > 0.0 {
-            cx.stroke(
-                &rect.to_rounded_rect(radius as f64),
-                border_color,
-                left as f64,
-            );
+            cx.stroke(&rect.to_rounded_rect(radius), border_color, left);
         } else {
-            cx.stroke(&rect, border_color, left as f64);
+            cx.stroke(&rect, border_color, left);
         }
     } else {
         if left > 0.0 {
@@ -1112,10 +1108,6 @@ impl View for Box<dyn View> {
         (**self).id()
     }
 
-    fn view_style(&self) -> Option<Style> {
-        (**self).view_style()
-    }
-
     fn child(&self, id: Id) -> Option<&dyn View> {
         (**self).child(id)
     }
diff --git a/src/views/clip.rs b/src/views/clip.rs
index 71f5c698..31d8d217 100644
--- a/src/views/clip.rs
+++ b/src/views/clip.rs
@@ -82,13 +82,13 @@ impl<V: View> View for Clip<V> {
     fn paint(&mut self, cx: &mut crate::context::PaintCx) {
         cx.save();
         let style = cx.get_computed_style(self.id);
-        let radius = style.border_radius;
+        let radius = style.border_radius.0;
         let size = cx
             .get_layout(self.id)
             .map(|layout| Size::new(layout.size.width as f64, layout.size.height as f64))
             .unwrap_or_default();
         if radius > 0.0 {
-            let rect = size.to_rect().to_rounded_rect(radius as f64);
+            let rect = size.to_rect().to_rounded_rect(radius);
             cx.clip(&rect);
         } else {
             cx.clip(&size.to_rect());
diff --git a/src/views/decorator.rs b/src/views/decorator.rs
index 8045c461..124491f6 100644
--- a/src/views/decorator.rs
+++ b/src/views/decorator.rs
@@ -34,10 +34,10 @@ pub trait Decorators: View + Sized {
     /// ```
     /// If you are returning from a function that produces a view, you may want
     /// to use `base_style` for the returned [`View`] instead.  
-    fn style(self, style: impl Fn(Style) -> Style + 'static) -> Self {
+    fn style(self, style: impl Fn(Style) -> Style + Clone + 'static) -> Self {
         let id = self.id();
         create_effect(move |_| {
-            let style = style(Style::BASE);
+            let style = Box::new(style.clone());
             id.update_style(style);
         });
         self
@@ -60,49 +60,58 @@ pub trait Decorators: View + Sized {
     ///     ))
     /// }
     /// ```
-    fn base_style(self, style: impl Fn(Style) -> Style + 'static) -> Self {
+    fn base_style(self, style: impl Fn(Style) -> Style + Clone + 'static) -> Self {
         let id = self.id();
         create_effect(move |_| {
-            let style = style(Style::BASE);
+            let style = Box::new(style.clone());
             id.update_base_style(style);
         });
         self
     }
 
+    fn override_style(self, style: impl Fn(Style) -> Style + Clone + 'static) -> Self {
+        let id = self.id();
+        create_effect(move |_| {
+            let style = Box::new(style.clone());
+            id.update_override_style(style);
+        });
+        self
+    }
+
     /// The visual style to apply when the mouse hovers over the element
-    fn hover_style(self, style: impl Fn(Style) -> Style + 'static) -> Self {
+    fn hover_style(self, style: impl Fn(Style) -> Style + Clone + 'static) -> Self {
         let id = self.id();
         create_effect(move |_| {
-            let style = style(Style::BASE);
+            let style = Box::new(style.clone());
             id.update_style_selector(style, StyleSelector::Hover);
         });
         self
     }
 
     /// The visual style to apply when the mouse hovers over the element
-    fn dragging_style(self, style: impl Fn(Style) -> Style + 'static) -> Self {
+    fn dragging_style(self, style: impl Fn(Style) -> Style + Clone + 'static) -> Self {
         let id = self.id();
         create_effect(move |_| {
-            let style = style(Style::BASE);
+            let style = Box::new(style.clone());
             id.update_style_selector(style, StyleSelector::Dragging);
         });
         self
     }
 
-    fn focus_style(self, style: impl Fn(Style) -> Style + 'static) -> Self {
+    fn focus_style(self, style: impl Fn(Style) -> Style + Clone + 'static) -> Self {
         let id = self.id();
         create_effect(move |_| {
-            let style = style(Style::BASE);
+            let style = Box::new(style.clone());
             id.update_style_selector(style, StyleSelector::Focus);
         });
         self
     }
 
     /// Similar to the `:focus-visible` css selector, this style only activates when tab navigation is used.
-    fn focus_visible_style(self, style: impl Fn(Style) -> Style + 'static) -> Self {
+    fn focus_visible_style(self, style: impl Fn(Style) -> Style + Clone + 'static) -> Self {
         let id = self.id();
         create_effect(move |_| {
-            let style = style(Style::BASE);
+            let style = Box::new(style.clone());
             id.update_style_selector(style, StyleSelector::FocusVisible);
         });
         self
@@ -121,28 +130,32 @@ pub trait Decorators: View + Sized {
         self
     }
 
-    fn active_style(self, style: impl Fn(Style) -> Style + 'static) -> Self {
+    fn active_style(self, style: impl Fn(Style) -> Style + Clone + 'static) -> Self {
         let id = self.id();
         create_effect(move |_| {
-            let style = style(Style::BASE);
+            let style = Box::new(style.clone());
             id.update_style_selector(style, StyleSelector::Active);
         });
         self
     }
 
-    fn disabled_style(self, style: impl Fn(Style) -> Style + 'static) -> Self {
+    fn disabled_style(self, style: impl Fn(Style) -> Style + Clone + 'static) -> Self {
         let id = self.id();
         create_effect(move |_| {
-            let style = style(Style::BASE);
+            let style = Box::new(style.clone());
             id.update_style_selector(style, StyleSelector::Disabled);
         });
         self
     }
 
-    fn responsive_style(self, size: ScreenSize, style: impl Fn(Style) -> Style + 'static) -> Self {
+    fn responsive_style(
+        self,
+        size: ScreenSize,
+        style: impl Fn(Style) -> Style + Clone + 'static,
+    ) -> Self {
         let id = self.id();
         create_effect(move |_| {
-            let style = style(Style::BASE);
+            let style = Box::new(style.clone());
             id.update_responsive_style(style, size);
         });
         self
diff --git a/src/views/dyn_container.rs b/src/views/dyn_container.rs
index fbc5afb0..50c6f9e5 100644
--- a/src/views/dyn_container.rs
+++ b/src/views/dyn_container.rs
@@ -60,7 +60,7 @@ pub struct DynamicContainer<T: 'static> {
 ///     ))
 ///     .style(|| {
 ///         Style::BASE
-///             .size_pct(100., 100.)
+///             .size(Pct(100), Pct(100))
 ///             .items_center()
 ///             .justify_center()
 ///             .gap(points(10.))
diff --git a/src/views/label.rs b/src/views/label.rs
index 9f69c2e9..528ef331 100644
--- a/src/views/label.rs
+++ b/src/views/label.rs
@@ -1,8 +1,12 @@
 use std::{any::Any, fmt::Display};
 
 use crate::{
+    context::{EventCx, UpdateCx},
     cosmic_text::{Attrs, AttrsList, FamilyOwned, TextLayout},
-    style::{ComputedStyle, TextOverflow},
+    event::Event,
+    id::Id,
+    style::{Style, TextOverflow},
+    view::{ChangeFlags, View},
 };
 use floem_reactive::create_effect;
 use floem_renderer::{
@@ -11,15 +15,7 @@ use floem_renderer::{
 };
 use kurbo::{Point, Rect};
 use peniko::Color;
-use taffy::{prelude::Node, style::Dimension};
-
-use crate::{
-    context::{EventCx, UpdateCx},
-    event::Event,
-    id::Id,
-    style::Style,
-    view::{ChangeFlags, View},
-};
+use taffy::prelude::Node;
 
 pub struct Label {
     id: Id,
@@ -203,10 +199,9 @@ impl View for Label {
             }
             let text_node = self.text_node.unwrap();
 
-            let style = Style::BASE
-                .width(Dimension::Points(width))
-                .height(Dimension::Points(height))
-                .compute(&ComputedStyle::default())
+            let style = Style::default()
+                .width(width)
+                .height(height)
                 .to_taffy_style();
             let _ = cx.app_state_mut().taffy.set_style(text_node, style);
 
diff --git a/src/views/rich_text.rs b/src/views/rich_text.rs
index a10c4409..072ebcf9 100644
--- a/src/views/rich_text.rs
+++ b/src/views/rich_text.rs
@@ -3,13 +3,13 @@ use std::any::Any;
 use floem_reactive::create_effect;
 use floem_renderer::{cosmic_text::TextLayout, Renderer};
 use kurbo::{Point, Rect};
-use taffy::{prelude::Node, style::Dimension};
+use taffy::prelude::Node;
 
 use crate::{
     context::{EventCx, UpdateCx},
     event::Event,
     id::Id,
-    style::{ComputedStyle, Style, TextOverflow},
+    style::{Style, TextOverflow},
     view::{ChangeFlags, View},
 };
 
@@ -105,10 +105,9 @@ impl View for RichText {
             }
             let text_node = self.text_node.unwrap();
 
-            let style = Style::BASE
-                .width(Dimension::Points(width))
-                .height(Dimension::Points(height))
-                .compute(&ComputedStyle::default())
+            let style = Style::default()
+                .width(width)
+                .height(height)
                 .to_taffy_style();
             let _ = cx.app_state_mut().taffy.set_style(text_node, style);
             vec![text_node]
diff --git a/src/views/scroll.rs b/src/views/scroll.rs
index c6d57d9c..66ccf4e6 100644
--- a/src/views/scroll.rs
+++ b/src/views/scroll.rs
@@ -2,16 +2,13 @@ use floem_reactive::create_effect;
 use floem_renderer::Renderer;
 use kurbo::{Point, Rect, Size, Vec2};
 use peniko::Color;
-use taffy::{
-    prelude::Node,
-    style::{Dimension, Position},
-};
+use taffy::prelude::Node;
 
 use crate::{
     context::{AppState, LayoutCx, PaintCx},
     event::Event,
     id::Id,
-    style::{ComputedStyle, Style, StyleValue},
+    style::Style,
     view::{ChangeFlags, View},
 };
 
@@ -585,15 +582,14 @@ impl<V: View> View for Scroll<V> {
 
             let child_id = self.child.id();
             let child_view = cx.app_state_mut().view_state(child_id);
-            child_view.style.position = StyleValue::Val(Position::Absolute);
+            child_view.override_style = Some(Box::new(|style: Style| style.absolute()));
             let child_node = self.child.layout_main(cx);
 
-            let virtual_style = Style::BASE
-                .width(Dimension::Points(self.child_size.width as f32))
-                .height(Dimension::Points(self.child_size.height as f32))
-                .min_width(Dimension::Points(0.0))
-                .min_height(Dimension::Points(0.0))
-                .compute(&ComputedStyle::default())
+            let virtual_style = Style::default()
+                .width(self.child_size.width)
+                .height(self.child_size.height)
+                .min_width(0)
+                .min_height(0)
                 .to_taffy_style();
             if self.virtual_node.is_none() {
                 self.virtual_node = Some(
@@ -758,9 +754,9 @@ impl<V: View> View for Scroll<V> {
             self.scroll_bar_style.edge_width = edge_width;
         }
         let style = cx.get_computed_style(self.id);
-        let radius = style.border_radius;
+        let radius = style.border_radius.0;
         if radius > 0.0 {
-            let rect = self.actual_rect.to_rounded_rect(radius as f64);
+            let rect = self.actual_rect.to_rounded_rect(radius);
             cx.clip(&rect);
         } else {
             cx.clip(&self.actual_rect);
diff --git a/src/views/svg.rs b/src/views/svg.rs
index 95cebcc5..b6ff3c91 100644
--- a/src/views/svg.rs
+++ b/src/views/svg.rs
@@ -41,12 +41,12 @@ pub fn checkbox(checked: crate::reactive::ReadSignal<bool>) -> Svg {
 
     svg(svg_str)
         .style(|base| {
-            base.width_px(20.)
-                .height_px(20.)
+            base.width(20)
+                .height(20)
                 .border_color(Color::BLACK)
-                .border(1.)
-                .border_radius(5.)
-                .margin_right_px(5.)
+                .border(1)
+                .border_radius(5)
+                .margin_right(5)
         })
         .keyboard_navigatable()
 }
diff --git a/src/views/tab.rs b/src/views/tab.rs
index 6418e999..f4b57d95 100644
--- a/src/views/tab.rs
+++ b/src/views/tab.rs
@@ -8,6 +8,7 @@ use taffy::style::Display;
 use crate::{
     context::{EventCx, UpdateCx},
     id::Id,
+    style::Style,
     view::{ChangeFlags, View},
 };
 
@@ -181,9 +182,11 @@ impl<V: View + 'static, T> View for Tab<V, T> {
                     let child_view = cx.app_state_mut().view_state(child_id);
                     if i != self.active {
                         // set display to none for non active child
-                        child_view.style.display = Display::None.into();
+                        child_view.override_style =
+                            Some(Box::new(|style: Style| style.display(Display::None)));
                     } else {
-                        child_view.style.display = Display::Flex.into();
+                        child_view.override_style =
+                            Some(Box::new(|style: Style| style.display(Display::Flex)));
                     }
                     let node = child.as_mut()?.0.layout_main(cx);
                     Some(node)
diff --git a/src/views/text_input.rs b/src/views/text_input.rs
index 912aa146..6cd17bc4 100644
--- a/src/views/text_input.rs
+++ b/src/views/text_input.rs
@@ -2,10 +2,7 @@ use crate::action::exec_after;
 use crate::keyboard::KeyEvent;
 use crate::reactive::{create_effect, RwSignal};
 use crate::{context::LayoutCx, style::CursorStyle};
-use taffy::{
-    prelude::{Layout, Node},
-    style::Dimension,
-};
+use taffy::prelude::{Layout, Node};
 
 use floem_renderer::{
     cosmic_text::{Cursor, Style as FontStyle, Weight},
@@ -22,10 +19,7 @@ use std::{
     time::{Duration, Instant},
 };
 
-use crate::{
-    cosmic_text::{Attrs, AttrsList, FamilyOwned, TextLayout},
-    style::ComputedStyle,
-};
+use crate::cosmic_text::{Attrs, AttrsList, FamilyOwned, TextLayout};
 use kurbo::{Point, Rect};
 
 use crate::{
@@ -633,10 +627,9 @@ impl View for TextInput {
             }
             let text_node = self.text_node.unwrap();
 
-            let style = Style::BASE
-                .width(Dimension::Points(self.width))
-                .height(Dimension::Points(self.height))
-                .compute(&ComputedStyle::default())
+            let style = Style::default()
+                .width(self.width)
+                .height(self.height)
                 .to_taffy_style();
             let _ = cx.app_state_mut().taffy.set_style(text_node, style);
 
diff --git a/src/window_handle.rs b/src/window_handle.rs
index 46f064a8..df5aefcb 100644
--- a/src/window_handle.rs
+++ b/src/window_handle.rs
@@ -84,10 +84,10 @@ impl WindowHandle {
         let view = with_scope(scope, move || {
             Box::new(
                 stack((
-                    container_box(view_fn(window_id)).style(|s| s.size_pct(100.0, 100.0)),
+                    container_box(view_fn(window_id)).style(|s| s.size(Pct(100.0), Pct(100.0))),
                     context_menu_view(scope, window_id, context_menu, size),
                 ))
-                .style(|s| s.size_pct(100.0, 100.0)),
+                .style(|s| s.size(Pct(100.0), Pct(100.0))),
             )
         });
 
@@ -573,7 +573,12 @@ impl WindowHandle {
                     }
                     UpdateMessage::Style { id, style } => {
                         let state = cx.app_state.view_state(id);
-                        state.style = style;
+                        state.style = Some(style);
+                        cx.request_layout(id);
+                    }
+                    UpdateMessage::OverrideStyle { id, style } => {
+                        let state = cx.app_state.view_state(id);
+                        state.override_style = Some(style);
                         cx.request_layout(id);
                     }
                     UpdateMessage::ResponsiveStyle { id, style, size } => {
@@ -808,7 +813,7 @@ impl WindowHandle {
             AnimPropKind::BorderRadius => {
                 let border_radius = view_state.computed_style.border_radius;
                 AnimatedProp::BorderRadius {
-                    from: border_radius as f64,
+                    from: border_radius.0 as f64,
                     to: val.get_f64(),
                 }
             }
@@ -1081,10 +1086,10 @@ fn context_menu_view(
                     stack((
                         text(menu.title),
                         svg(|| submenu_svg.to_string()).style(move |s| {
-                            s.size_px(20.0, 20.0)
+                            s.size(20.0, 20.0)
                                 .color(Color::rgb8(201, 201, 201))
-                                .margin_right_px(10.0)
-                                .margin_left_px(20.0)
+                                .margin_right(10.0)
+                                .margin_left(20.0)
                                 .apply_if(!has_submenu, |s| s.hide())
                         }),
                     ))
@@ -1130,9 +1135,9 @@ fn context_menu_view(
                     })
                     .disabled(move || !menu.enabled)
                     .style(|s| {
-                        s.width_pct(100.0)
-                            .min_width_pct(100.0)
-                            .padding_horiz_px(20.0)
+                        s.width(Pct(100.0))
+                            .min_width(Pct(100.0))
+                            .padding_horiz(20.0)
                             .justify_between()
                             .items_center()
                     })
@@ -1190,13 +1195,13 @@ fn context_menu_view(
                     })
                     .style(move |s| {
                         s.absolute()
-                            .min_width_px(200.0)
-                            .margin_top_px(-5.0)
-                            .margin_left_px(menu_width.get() as f32)
+                            .min_width(200.0)
+                            .margin_top(-5.0)
+                            .margin_left(menu_width.get() as f32)
                             .flex_col()
                             .border_radius(10.0)
                             .background(Color::rgb8(44, 44, 44))
-                            .padding_px(5.0)
+                            .padding(5.0)
                             .cursor(CursorStyle::Default)
                             .box_shadow_blur(5.0)
                             .box_shadow_color(Color::BLACK)
@@ -1206,17 +1211,17 @@ fn context_menu_view(
                             )
                     }),
                 ))
-                .style(|s| s.min_width_pct(100.0)),
+                .style(|s| s.min_width(Pct(100.0))),
             )
-            .style(|s| s.min_width_pct(100.0))
+            .style(|s| s.min_width(Pct(100.0)))
         } else {
             container_box(empty().style(|s| {
-                s.width_pct(100.0)
-                    .height_px(1.0)
-                    .margin_vert_px(5.0)
+                s.width(Pct(100.0))
+                    .height(1.0)
+                    .margin_vert(5.0)
                     .background(Color::rgb8(92, 92, 92))
             }))
-            .style(|s| s.min_width_pct(100.0).padding_horiz_px(20.0))
+            .style(|s| s.min_width(Pct(100.0)).padding_horiz(20.0))
         }
     }
 
@@ -1269,16 +1274,16 @@ fn context_menu_view(
             pos.y = window_size.height - menu_size.height;
         }
         s.absolute()
-            .min_width_px(200.0)
+            .min_width(200.0)
             .flex_col()
             .border_radius(10.0)
             .background(Color::rgb8(44, 44, 44))
             .color(Color::rgb8(201, 201, 201))
             .z_index(999)
             .line_height(2.0)
-            .padding_px(5.0)
-            .margin_left_px(pos.x as f32)
-            .margin_top_px(pos.y as f32)
+            .padding(5.0)
+            .margin_left(pos.x as f32)
+            .margin_top(pos.y as f32)
             .cursor(CursorStyle::Default)
             .apply_if(!is_acitve, |s| s.hide())
             .box_shadow_blur(5.0)