diff --git a/packages/main/src/RadioButton.hbs b/packages/main/src/RadioButton.hbs
index 9078de56a956..f4146411cc1f 100644
--- a/packages/main/src/RadioButton.hbs
+++ b/packages/main/src/RadioButton.hbs
@@ -14,8 +14,8 @@
 >
 	<div class='ui5-radio-inner {{classes.inner}}'>
 		<svg class="ui5-radio-svg" focusable="false" aria-hidden="true">
-			<circle class="ui5-radio-svg-outer" cx="50%" cy="50%" r="50%" />
-			<circle class="ui5-radio-svg-inner" cx="50%" cy="50%" />
+			<circle part="outer-ring" class="ui5-radio-svg-outer" cx="50%" cy="50%" r="50%" />
+			<circle part="inner-ring" class="ui5-radio-svg-inner" cx="50%" cy="50%" />
 		</svg>
 		<input type='radio' ?required="{{required}}" ?checked="{{checked}}" ?readonly="{{readonly}}" ?disabled="{{effectiveAriaDisabled}}" name="{{name}}"  data-sap-no-tab-ref/>
 	</div>
diff --git a/packages/main/src/RadioButton.ts b/packages/main/src/RadioButton.ts
index 5e84a250c01b..c8f540b59972 100644
--- a/packages/main/src/RadioButton.ts
+++ b/packages/main/src/RadioButton.ts
@@ -71,6 +71,8 @@ let activeRadio: RadioButton;
  * @constructor
  * @extends UI5Element
  * @public
+ * @csspart outer-ring - Used to style the outer ring of the <code>ui5-radio-button</code>.
+ * @csspart inner-ring - Used to style the inner ring of the <code>ui5-radio-button</code>.
  */
 @customElement({
 	tag: "ui5-radio-button",
diff --git a/packages/main/test/pages/RadioButton.html b/packages/main/test/pages/RadioButton.html
index bdf85a48dcc0..e9a4e7e5dffa 100644
--- a/packages/main/test/pages/RadioButton.html
+++ b/packages/main/test/pages/RadioButton.html
@@ -162,6 +162,13 @@
 		<input type="submit">
 	</form>
 
+	<ui5-title level="H2">Custom styling with css parts</ui5-title>
+	<div class="customStyling">
+		<ui5-radio-button id="customRb1" checked text="Inner ring on hover"></ui5-radio-button>
+		<ui5-radio-button value-state="Error" text="Outer ring with Error State"></ui5-radio-button>
+		<ui5-radio-button value-state="Success" text="Outer ring with Success State"></ui5-radio-button>
+	</div>
+
 	<script>
 		var counter = 0;
 		var groupEventCounter = 0;
diff --git a/packages/main/test/pages/styles/RadioButton.css b/packages/main/test/pages/styles/RadioButton.css
index 98dc33d1c0bd..9ef5c1249b18 100644
--- a/packages/main/test/pages/styles/RadioButton.css
+++ b/packages/main/test/pages/styles/RadioButton.css
@@ -22,3 +22,18 @@ div {
 .radiobutton2auto {
     width: 300px
 }
+
+div.customStyling{
+    width: 100%;
+}
+
+.customStyling #customRb1:hover::part(inner-ring) {
+    fill: #20b7d5;
+}
+
+.customStyling ui5-radio-button[value-state="Error"]::part(outer-ring) {
+    stroke: rgb(212 56 247);
+}
+.customStyling ui5-radio-button[value-state="Success"]::part(outer-ring) {
+    stroke: rgb(12 223 147);
+}
\ No newline at end of file