diff --git a/core/src/components/avatar/avatar.ios.scss b/core/src/components/avatar/avatar.ios.scss
index 5cb0d8ce8d..774c972f07 100644
--- a/core/src/components/avatar/avatar.ios.scss
+++ b/core/src/components/avatar/avatar.ios.scss
@@ -6,15 +6,8 @@
// --------------------------------------------------
:host {
- @include border-radius($avatar-ios-border-radius);
+ --border-radius: #{$avatar-ios-border-radius};
width: $avatar-ios-width;
height: $avatar-ios-height;
}
-
-::slotted(ion-img),
-::slotted(img) {
- @include border-radius($avatar-ios-border-radius);
-
- overflow: hidden;
-}
diff --git a/core/src/components/avatar/avatar.md.scss b/core/src/components/avatar/avatar.md.scss
index e6338e4cfa..66492c7fbd 100644
--- a/core/src/components/avatar/avatar.md.scss
+++ b/core/src/components/avatar/avatar.md.scss
@@ -6,15 +6,8 @@
// --------------------------------------------------
:host {
- @include border-radius($avatar-md-border-radius);
+ --border-radius: #{$avatar-md-border-radius};
width: $avatar-md-width;
height: $avatar-md-height;
}
-
-::slotted(ion-img),
-::slotted(img) {
- @include border-radius($avatar-md-border-radius);
-
- overflow: hidden;
-}
diff --git a/core/src/components/avatar/avatar.scss b/core/src/components/avatar/avatar.scss
index 4df2a0af20..ef0413c5ba 100644
--- a/core/src/components/avatar/avatar.scss
+++ b/core/src/components/avatar/avatar.scss
@@ -5,13 +5,22 @@
// --------------------------------------------------
:host {
+ /**
+ * @prop --border-radius: Border radius of the avatar and inner image
+ */
+ @include border-radius(var(--border-radius));
+
display: block;
}
::slotted(ion-img),
::slotted(img) {
+ @include border-radius(var(--border-radius));
+
width: 100%;
height: 100%;
object-fit: cover;
+
+ overflow: hidden;
}
diff --git a/core/src/components/avatar/readme.md b/core/src/components/avatar/readme.md
index 6a474715ff..6708e9ec0f 100644
--- a/core/src/components/avatar/readme.md
+++ b/core/src/components/avatar/readme.md
@@ -8,6 +8,12 @@ Avatars can be used by themselves or inside of any element. If placed inside of
+## CSS Custom Properties
+
+| Name | Description |
+| ----------------- | ------------------------------------------- |
+| `--border-radius` | Border radius of the avatar and inner image |
+
----------------------------------------------
diff --git a/core/src/components/avatar/test/standalone/index.html b/core/src/components/avatar/test/standalone/index.html
index 629ed3e808..1ee274f0f1 100644
--- a/core/src/components/avatar/test/standalone/index.html
+++ b/core/src/components/avatar/test/standalone/index.html
@@ -9,9 +9,19 @@
-
+
+ Default
+
+ Custom
+
+
+
+
+
+
+