diff --git a/core/src/components/segment-button/segment-button.ios.scss b/core/src/components/segment-button/segment-button.ios.scss
index f720e6bb99..57f4da6f29 100644
--- a/core/src/components/segment-button/segment-button.ios.scss
+++ b/core/src/components/segment-button/segment-button.ios.scss
@@ -110,7 +110,7 @@
 }
 
 .segment-button-indicator-background {
-  @include border-radius($segment-button-ios-border-radius);
+  @include border-radius(var(--border-radius));
 
   background: var(--indicator-color);
 }
diff --git a/core/src/components/segment/test/custom/index.html b/core/src/components/segment/test/custom/index.html
index 77fe10639f..1b009ea9ad 100644
--- a/core/src/components/segment/test/custom/index.html
+++ b/core/src/components/segment/test/custom/index.html
@@ -17,7 +17,7 @@
   <ion-app>
     <ion-header>
       <ion-toolbar>
-        <ion-segment value="Free">
+        <ion-segment value="Free" id="custom-radius">
           <ion-segment-button value="Paid">
             <ion-label>Paid</ion-label>
           </ion-segment-button>
@@ -242,6 +242,12 @@
     margin-bottom: 0;
   }
 
+  #custom-radius ion-segment-button {
+    --background: rgba(0, 0, 255, 0.1);
+    --background-checked: rgba(0, 0, 255, 0.3);
+    --border-radius: 10px;
+  }
+
   /*
    * Custom Checked Segment (Paid, Free, Top)
    *