diff --git a/hui-examples/examples/mom_downloader.rs b/hui-examples/examples/mom_downloader.rs
index d52e479..2964457 100644
--- a/hui-examples/examples/mom_downloader.rs
+++ b/hui-examples/examples/mom_downloader.rs
@@ -1,13 +1,11 @@
 use std::time::Instant;
 use hui::{
-  size,
-  layout::{Alignment, Direction},
   element::{
     container::Container,
     progress_bar::ProgressBar,
     text::Text,
     UiElementExt,
-  },
+  }, frame::FrameRect, layout::{Alignment, Direction}, size
 };
 
 #[path = "../boilerplate.rs"]
@@ -33,8 +31,10 @@ ui_main!{
           .with_gap(5.)
           .with_padding(10.)
           .with_size(size!(450, auto))
-          .with_background((0.2, 0.2, 0.5))
-          .with_corner_radius(8.)
+          .with_background(
+            FrameRect::color((0.2, 0.2, 0.5))
+              .with_corner_radius(8.)
+          )
           .with_children(|ui| {
             if instant.elapsed().as_secs_f32() < 5. {
               Text::default()
diff --git a/hui-examples/examples/ui_test.rs b/hui-examples/examples/ui_test.rs
index 8849040..f248ecc 100644
--- a/hui-examples/examples/ui_test.rs
+++ b/hui-examples/examples/ui_test.rs
@@ -1,7 +1,5 @@
 use hui::{
-  color, size,
-  layout::Alignment,
-  element::{UiElementExt, container::Container, text::Text},
+  color, element::{container::Container, text::Text, UiElementExt}, frame::FrameRect, layout::Alignment, size
 };
 
 #[path = "../boilerplate.rs"]
@@ -14,8 +12,10 @@ ui_main!(|ui, size, _| {
     .with_align(Alignment::Center)
     .with_padding(5.)
     .with_gap(10.)
-    .with_corner_radius(10.)
-    .with_background(color::WHITE)
+    .with_background(
+      FrameRect::color(color::WHITE)
+        .with_corner_radius(10.)
+    )
     .with_children(|ui| {
       Text::default()
         .with_text("Hello, world")
@@ -24,8 +24,10 @@ ui_main!(|ui, size, _| {
         .add_child(ui);
       Container::default()
         .with_padding((10., 20.))
-        .with_corner_radius((2.5, 30., 2.5, 2.5))
-        .with_background(color::DARK_RED)
+        .with_background(
+          FrameRect::color(color::DARK_RED)
+            .with_corner_radius((2.5, 30., 2.5, 2.5))
+        )
         .with_children(|ui| {
           Text::default()
             .with_text("Lorem ipsum dolor sit amet, consectetur adipiscing elit.")
diff --git a/hui-examples/examples/ui_test_2_loading.rs b/hui-examples/examples/ui_test_2_loading.rs
index 8ca5ff6..dec5cd3 100644
--- a/hui-examples/examples/ui_test_2_loading.rs
+++ b/hui-examples/examples/ui_test_2_loading.rs
@@ -1,10 +1,6 @@
 use glam::vec4;
 use hui::{
-  color, size,
-  element::{container::Container, progress_bar::ProgressBar, text::Text, UiElementExt},
-  layout::Alignment,
-  rect::Corners,
-  text::FontHandle,
+  color, element::{container::Container, progress_bar::ProgressBar, text::Text, UiElementExt}, frame::FrameRect, layout::Alignment, rect::Corners, size, text::FontHandle
 };
 
 #[path = "../boilerplate.rs"]
@@ -38,8 +34,10 @@ ui_main!(
       .with_children(|ui| {
         Container::default()
           .with_padding((10., 15.))
-          .with_corner_radius(8.)
-          .with_background((0., 0., 0., 0.5))
+          .with_background(
+            FrameRect::color((0., 0., 0., 0.5))
+              .with_corner_radius(8.)
+          )
           .with_children(|ui| {
             let flash = 1. - 0.5 * (4. * instant.elapsed().as_secs_f32()).sin().powi(2);
             Text::default()
@@ -61,8 +59,10 @@ ui_main!(
           .with_align((Alignment::Center, Alignment::Begin))
           .with_padding(15.)
           .with_gap(10.)
-          .with_corner_radius(8.)
-          .with_background((0., 0., 0., 0.5))
+          .with_background(
+            FrameRect::color((0., 0., 0., 0.5))
+              .with_corner_radius(8.)
+          )
           .with_children(|ui| {
             Text::default()
               .with_text("Did  you  know?")
@@ -100,8 +100,10 @@ ui_main!(
       .with_children(|ui| {
         Container::default()
           .with_padding(10.)
-          .with_corner_radius(8.)
-          .with_background((0., 0., 0., 0.5))
+          .with_background(
+            FrameRect::color((0., 0., 0., 0.5))
+              .with_corner_radius(8.)
+          )
           .with_children(|ui| {
             Text::default()
               .with_text("Level 5")
diff --git a/hui-examples/examples/ui_test_3_transform.rs b/hui-examples/examples/ui_test_3_transform.rs
index 3c756fa..178d4e2 100644
--- a/hui-examples/examples/ui_test_3_transform.rs
+++ b/hui-examples/examples/ui_test_3_transform.rs
@@ -7,11 +7,7 @@ use hui::{
     text::Text,
     transformer::ElementTransformExt,
     UiElementExt
-  },
-  layout::Alignment,
-  rect::Corners,
-  text::FontHandle,
-  size,
+  }, frame::FrameRect, layout::Alignment, rect::Corners, size, text::FontHandle
 };
 
 #[path = "../boilerplate.rs"]
@@ -41,8 +37,10 @@ ui_main!(
           .with_align((Alignment::Center, Alignment::Begin))
           .with_padding(15.)
           .with_gap(10.)
-          .with_corner_radius(8.)
-          .with_background((0., 0., 0., 0.5))
+          .with_background(
+            FrameRect::color((0., 0., 0., 0.5))
+              .with_corner_radius(8.)
+          )
           .with_children(|ui| {
             Text::default()
               .with_text("Did  you  know?")