diff --git a/core/api.txt b/core/api.txt
index 8c4670f0b9f..0c58b40aa51 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1270,8 +1270,10 @@ ion-toggle,event,ionChange,ToggleChangeEventDetail,true
ion-toggle,event,ionFocus,void,true
ion-toggle,css-prop,--background
ion-toggle,css-prop,--background-checked
+ion-toggle,css-prop,--border-radius
ion-toggle,css-prop,--handle-background
ion-toggle,css-prop,--handle-background-checked
+ion-toggle,css-prop,--handle-border-radius
ion-toolbar,shadow
ion-toolbar,prop,color,string | undefined,undefined,false,false
diff --git a/core/src/components/toggle/readme.md b/core/src/components/toggle/readme.md
index 0d76344350b..13ba675ee4e 100644
--- a/core/src/components/toggle/readme.md
+++ b/core/src/components/toggle/readme.md
@@ -202,8 +202,10 @@ export const ToggleExample: React.FC = () => (
| ----------------------------- | -------------------------------------------- |
| `--background` | Background of the toggle |
| `--background-checked` | Background of the toggle when checked |
+| `--border-radius` | Border radius of the toggle track |
| `--handle-background` | Background of the toggle handle |
| `--handle-background-checked` | Background of the toggle handle when checked |
+| `--handle-border-radius` | Border radius of the toggle handle |
----------------------------------------------
diff --git a/core/src/components/toggle/test/basic/index.html b/core/src/components/toggle/test/basic/index.html
index d7e39af8595..d7ebb98562e 100644
--- a/core/src/components/toggle/test/basic/index.html
+++ b/core/src/components/toggle/test/basic/index.html
@@ -70,6 +70,11 @@
Button w/ right side default icon, really long text that should ellipsis
+
+
+ Custom
+
+
diff --git a/core/src/components/toggle/toggle.ios.scss b/core/src/components/toggle/toggle.ios.scss
index 640bed77285..a02ff7a1d3f 100644
--- a/core/src/components/toggle/toggle.ios.scss
+++ b/core/src/components/toggle/toggle.ios.scss
@@ -9,7 +9,9 @@
--background-checked: #{ion-color(primary, base)};
--handle-background: #{$toggle-ios-handle-background-color};
--handle-background-checked: #{$toggle-ios-handle-background-color};
-
+ --border-radius: #{$toggle-ios-border-radius};
+ --handle-border-radius: #{$toggle-ios-handle-border-radius};
+
box-sizing: content-box;
position: relative;
@@ -29,7 +31,7 @@
// -----------------------------------------
.toggle-icon {
- @include border-radius($toggle-ios-border-radius);
+ @include border-radius(var(--border-radius));
display: block;
position: relative;
@@ -55,7 +57,7 @@
.toggle-inner {
@include position($toggle-ios-border-width, null, null, $toggle-ios-border-width);
- @include border-radius($toggle-ios-handle-border-radius);
+ @include border-radius(var(--handle-border-radius));
position: absolute;
diff --git a/core/src/components/toggle/toggle.md.scss b/core/src/components/toggle/toggle.md.scss
index bdb402ae1d6..89a0c6c36f6 100644
--- a/core/src/components/toggle/toggle.md.scss
+++ b/core/src/components/toggle/toggle.md.scss
@@ -9,6 +9,8 @@
--background-checked: #{ion-color(primary, base, $toggle-md-track-background-color-alpha-on)};
--handle-background: #{$toggle-md-handle-background-color-off};
--handle-background-checked: #{ion-color(primary, base)};
+ --border-radius: #{$toggle-md-track-height};
+ --handle-border-radius: #{$toggle-md-handle-border-radius};
@include padding($toggle-md-padding-top, $toggle-md-padding-end, $toggle-md-padding-bottom, $toggle-md-padding-start);
@@ -34,7 +36,7 @@
// -----------------------------------------
.toggle-icon {
- @include border-radius($toggle-md-track-height);
+ @include border-radius(var(--border-radius));
display: block;
position: relative;
@@ -54,7 +56,7 @@
.toggle-inner {
@include position(($toggle-md-handle-height - $toggle-md-track-height) / -2, null, null, 0);
- @include border-radius($toggle-md-handle-border-radius);
+ @include border-radius(var(--handle-border-radius));
position: absolute;
diff --git a/core/src/components/toggle/toggle.scss b/core/src/components/toggle/toggle.scss
index 5f868b6a13b..0182603fa9d 100644
--- a/core/src/components/toggle/toggle.scss
+++ b/core/src/components/toggle/toggle.scss
@@ -9,6 +9,8 @@
* @prop --background-checked: Background of the toggle when checked
* @prop --handle-background: Background of the toggle handle
* @prop --handle-background-checked: Background of the toggle handle when checked
+ * @prop --border-radius: Border radius of the toggle track
+ * @prop --handle-border-radius: Border radius of the toggle handle
*/
/* stylelint-disable-next-line declaration-no-important */