diff --git a/includes/blocks/class-kadence-blocks-infobox-block.php b/includes/blocks/class-kadence-blocks-infobox-block.php
index a697c1784..6b1dcfc4b 100644
--- a/includes/blocks/class-kadence-blocks-infobox-block.php
+++ b/includes/blocks/class-kadence-blocks-infobox-block.php
@@ -344,20 +344,21 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
 			$css->add_property( 'border-color', $css->render_color( $media_style['border'] ) );
 		}
 		if ( isset( $media_style['borderRadius'] ) && ! empty( $media_style['borderRadius'] ) ) {
-			$css->add_property( 'border-radius', $media_style['borderRadius'] . 'px' );
+			$css->add_property( 'border-radius', $media_style['borderRadius'] . ( isset( $media_style['borderRadiusUnit'] )  ? $media_style['borderRadiusUnit'] : 'px' ) );
 		}
 		if ( isset( $media_style['borderWidth'] ) && is_array( $media_style['borderWidth'] ) ) {
+			$border_width_unit = isset( $media_style['borderWidthUnit'] ) ? $media_style['borderWidthUnit'] : 'px';
 			if ( isset( $media_style['borderWidth'][0] ) && is_numeric( $media_style['borderWidth'][0] ) ) {
-				$css->add_property( 'border-top-width', $media_style['borderWidth'][0] . 'px' );
+				$css->add_property( 'border-top-width', $media_style['borderWidth'][0] . $border_width_unit );
 			}
 			if ( isset( $media_style['borderWidth'][1] ) && is_numeric( $media_style['borderWidth'][1] ) ) {
-				$css->add_property( 'border-right-width', $media_style['borderWidth'][1] . 'px' );
+				$css->add_property( 'border-right-width', $media_style['borderWidth'][1] . $border_width_unit );
 			}
 			if ( isset( $media_style['borderWidth'][2] ) && is_numeric( $media_style['borderWidth'][2] ) ) {
-				$css->add_property( 'border-bottom-width', $media_style['borderWidth'][2] . 'px' );
+				$css->add_property( 'border-bottom-width', $media_style['borderWidth'][2] . $border_width_unit );
 			}
 			if ( isset( $media_style['borderWidth'][3] ) && is_numeric( $media_style['borderWidth'][3] ) ) {
-				$css->add_property( 'border-left-width', $media_style['borderWidth'][3] . 'px' );
+				$css->add_property( 'border-left-width', $media_style['borderWidth'][3] . $border_width_unit );
 			}
 		}
 		$padding_unit = isset( $media_style['paddingUnit'] ) ? $media_style['paddingUnit'] : 'px';
@@ -407,7 +408,7 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
 		}
 		if ( isset( $media_style['borderRadius'] ) && ! empty( $media_style['borderRadius'] ) && isset( $media_style['padding'] ) && is_array( $media_style['padding'] ) && ! empty( array_filter( $media_style['padding'], fn($value) => $value > 0 ) ) ) {
 			$css->set_selector( $base_selector . ' .kt-blocks-info-box-media .kadence-info-box-image-intrisic img' );
-			$css->add_property( 'border-radius', $media_style['borderRadius'] . 'px' );
+			$css->add_property( 'border-radius', $media_style['borderRadius'] . (isset( $media_style['borderRadiusUnit'] ) ? $media_style['borderRadiusUnit'] : 'px') );
 		}
 		$css->set_selector( $base_selector . ' .kt-blocks-info-box-link-wrap:hover .kt-blocks-info-box-media' );
 		if ( isset( $media_icon['hoverColor'] ) && ! empty( $media_icon['hoverColor'] ) ) {
diff --git a/src/blocks/infobox/block.json b/src/blocks/infobox/block.json
index 510ad9306..3a9939d64 100644
--- a/src/blocks/infobox/block.json
+++ b/src/blocks/infobox/block.json
@@ -158,7 +158,9 @@
 					"border": "",
 					"hoverBorder": "",
 					"borderRadius": 0,
+					"borderRadiusUnit": "px",
 					"borderWidth": [0, 0, 0, 0],
+					"borderWidthUnit": "px",
 					"padding": [10, 10, 10, 10],
 					"paddingUnit": "px",
 					"margin": [0, 15, 0, 15],
diff --git a/src/blocks/infobox/edit.js b/src/blocks/infobox/edit.js
index 41e536daf..9c6fd071d 100644
--- a/src/blocks/infobox/edit.js
+++ b/src/blocks/infobox/edit.js
@@ -1831,7 +1831,9 @@ function KadenceInfoBox(props) {
 				  )} !important; }`
 				: ''}
 			{mediaStyle[0].borderRadius && mediaStyle[0].padding.some((number) => number > 0)
-				? `.kb-info-box-wrap${uniqueID} .kt-blocks-info-box-link-wrap .kt-blocks-info-box-media .kadence-info-box-image-intrisic img, .kb-info-box-wrap${uniqueID} .kt-blocks-info-box-link-wrap .kt-blocks-info-box-media .block-editor-media-placeholder { border-radius: ${mediaStyle[0].borderRadius}px !important; }`
+				? `.kb-info-box-wrap${uniqueID} .kt-blocks-info-box-link-wrap .kt-blocks-info-box-media .kadence-info-box-image-intrisic img, .kb-info-box-wrap${uniqueID} .kt-blocks-info-box-link-wrap .kt-blocks-info-box-media .block-editor-media-placeholder { border-radius: ${
+						mediaStyle[0].borderRadius
+				  }${mediaStyle[0].borderRadiusUnit ?? 'px'} !important; }`
 				: ''}
 			{titleHoverColor
 				? `.kb-info-box-wrap${uniqueID} .kt-blocks-info-box-link-wrap:hover .kt-blocks-info-box-title { color: ${KadenceColorOutput(
@@ -2758,18 +2760,38 @@ function KadenceInfoBox(props) {
 												onChange={(value) => saveMediaStyle({ borderWidth: value })}
 												onControl={(value) => setMediaBorderControl(value)}
 												min={0}
-												max={40}
+												max={
+													mediaStyle[0]?.borderWidthUnit === 'px' ||
+													mediaStyle[0]?.borderWidthUnit === 'undefined'
+														? 40
+														: 12
+												}
 												step={1}
-												reset={() => saveMediaStyle({ borderWidth: [0, 0, 0, 0] })}
+												reset={() =>
+													saveMediaStyle({ borderWidth: [0, 0, 0, 0], borderWidthUnit: 'px' })
+												}
+												showUnit={true}
+												unit={mediaStyle[0].borderWidthUnit ?? 'px'}
+												onUnit={(value) => saveMediaStyle({ borderWidthUnit: value })}
 											/>
 											<RangeControl
-												label={__('Image Border Radius (px)', 'kadence-blocks')}
+												label={__('Image Border Radius', 'kadence-blocks')}
 												value={mediaStyle[0].borderRadius}
 												onChange={(value) => saveMediaStyle({ borderRadius: value })}
 												step={1}
 												min={0}
-												max={200}
-												reset={() => saveMediaStyle({ borderRadius: 0 })}
+												max={
+													mediaStyle[0]?.borderRadiusUnit === 'px' ||
+													mediaStyle[0]?.borderRadiusUnit === 'undefined'
+														? 200
+														: 12
+												}
+												reset={() =>
+													saveMediaStyle({ borderRadius: 0, borderRadiusUnit: 'px' })
+												}
+												showUnit={true}
+												unit={mediaStyle[0].borderRadiusUnit ?? 'px'}
+												onUnit={(value) => saveMediaStyle({ borderRadiusUnit: value })}
 											/>
 											<TabPanel
 												className="kt-inspect-tabs kt-hover-tabs"
@@ -2949,7 +2971,7 @@ function KadenceInfoBox(props) {
 													value={mediaIcon[0].width}
 													defaultValue={2}
 													onChange={(value) => saveMediaIcon({ width: value })}
-													step={0.5}
+													step={0.1}
 													min={0.5}
 													max={4}
 													reset={true}
@@ -2962,19 +2984,39 @@ function KadenceInfoBox(props) {
 												onChange={(value) => saveMediaStyle({ borderWidth: value })}
 												onControl={(value) => setMediaBorderControl(value)}
 												min={0}
-												max={40}
+												max={
+													mediaStyle[0]?.borderWidthUnit === 'px' ||
+													mediaStyle[0]?.borderWidthUnit === 'undefined'
+														? 40
+														: 12
+												}
 												step={1}
-												reset={() => saveMediaStyle({ borderWidth: [0, 0, 0, 0] })}
+												reset={() =>
+													saveMediaStyle({ borderWidth: [0, 0, 0, 0], borderWidthUnit: 'px' })
+												}
+												showUnit={true}
+												unit={mediaStyle[0].borderWidthUnit ?? 'px'}
+												onUnit={(value) => saveMediaStyle({ borderWidthUnit: value })}
 											/>
 											<RangeControl
-												label={__('Icon Border Radius (px)', 'kadence-blocks')}
+												label={__('Icon Border Radius', 'kadence-blocks')}
 												value={mediaStyle[0].borderRadius}
 												defaultValue={0}
 												onChange={(value) => saveMediaStyle({ borderRadius: value })}
 												step={1}
 												min={0}
-												max={200}
-												reset={true}
+												max={
+													mediaStyle[0]?.borderRadiusUnit === 'px' ||
+													mediaStyle[0]?.borderRadiusUnit === 'undefined'
+														? 200
+														: 12
+												}
+												reset={() =>
+													saveMediaStyle({ borderRadius: 0, borderRadiusUnit: 'px' })
+												}
+												showUnit={true}
+												unit={mediaStyle[0].borderRadiusUnit ?? 'px'}
+												onUnit={(value) => saveMediaStyle({ borderRadiusUnit: value })}
 											/>
 											<SelectControl
 												label={__('Icon Hover Animation', 'kadence-blocks')}
@@ -3138,10 +3180,14 @@ function KadenceInfoBox(props) {
 												onChange={(value) => saveMediaIcon({ size: value })}
 												onChangeTablet={(value) => saveMediaIcon({ tabletSize: value })}
 												onChangeMobile={(value) => saveMediaIcon({ mobileSize: value })}
-												min={5}
-												max={250}
+												min={['em', 'rem'].includes(mediaIcon[0].unit) ? 1 : 5}
+												max={['em', 'rem'].includes(mediaIcon[0].unit) ? 12 : 250}
 												step={1}
 												reset={true}
+												showUnit={true}
+												onUnit={(value) => saveMediaIcon({ unit: value })}
+												units={['px', 'em', 'rem']}
+												unit={mediaIcon[0].unit ? mediaIcon[0].unit : 'px'}
 											/>
 											<TypographyControls
 												fontGroup={'body'}
@@ -3182,18 +3228,41 @@ function KadenceInfoBox(props) {
 												onChange={(value) => saveMediaStyle({ borderWidth: value })}
 												onControl={(value) => setMediaBorderControl(value)}
 												min={0}
-												max={40}
+												max={
+													mediaStyle[0]?.borderWidthUnit === 'px' ||
+													mediaStyle[0]?.borderWidthUnit === 'undefined'
+														? 40
+														: 12
+												}
 												step={1}
-												reset={() => saveMediaStyle({ borderWidth: [0, 0, 0, 0] })}
+												reset={() =>
+													saveMediaStyle({ borderWidth: [0, 0, 0, 0], borderWidthUnit: 'px' })
+												}
+												showUnit={true}
+												unit={mediaStyle[0].borderWidthUnit ?? 'px'}
+												onUnit={(value) => saveMediaStyle({ borderWidthUnit: value })}
 											/>
 											<RangeControl
-												label={__('Number Border Radius (px)', 'kadence-blocks')}
+												label={__('Number Border Radius', 'kadence-blocks')}
 												value={mediaStyle[0].borderRadius}
 												onChange={(value) => saveMediaStyle({ borderRadius: value })}
 												step={1}
 												min={0}
-												max={200}
-												reset={() => saveMediaStyle({ borderRadius: [0, 15, 0, 15] })}
+												max={
+													mediaStyle[0]?.borderRadiusUnit === 'px' ||
+													mediaStyle[0]?.borderRadiusUnit === 'undefined'
+														? 200
+														: 12
+												}
+												reset={() =>
+													saveMediaStyle({
+														borderRadius: [0, 15, 0, 15],
+														borderRadiusUnit: 'px',
+													})
+												}
+												showUnit={true}
+												unit={mediaStyle[0].borderRadiusUnit ?? 'px'}
+												onUnit={(value) => saveMediaStyle({ borderRadiusUnit: value })}
 											/>
 											<SelectControl
 												label={__('Number Hover Animation', 'kadence-blocks')}
@@ -4116,16 +4185,19 @@ function KadenceInfoBox(props) {
 							style={{
 								borderColor: KadenceColorOutput(mediaStyle[0].border),
 								backgroundColor: KadenceColorOutput(mediaStyle[0].background),
-								borderRadius: mediaStyle[0].borderRadius + 'px',
+								borderRadius: mediaStyle[0].borderRadius + (mediaStyle[0].borderRadiusUnit ?? 'px'),
 								borderWidth: mediaStyle[0].borderWidth
 									? mediaStyle[0].borderWidth[0] +
-									  'px ' +
+									  (mediaStyle[0].borderWidthUnit ?? 'px') +
+									  ' ' +
 									  mediaStyle[0].borderWidth[1] +
-									  'px ' +
+									  (mediaStyle[0].borderWidthUnit ?? 'px') +
+									  ' ' +
 									  mediaStyle[0].borderWidth[2] +
-									  'px ' +
+									  (mediaStyle[0].borderWidthUnit ?? 'px') +
+									  ' ' +
 									  mediaStyle[0].borderWidth[3] +
-									  'px'
+									  (mediaStyle[0].borderWidthUnit ?? 'px')
 									: '',
 								padding: mediaStyle[0].padding
 									? mediaStyle[0].padding[0] +