diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
index 877b910b466..0dded31a24a 100644
--- a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
+++ b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
@@ -43,7 +43,7 @@
     <PackageReference Include="BootstrapBlazor.Html2Image" Version="9.0.2" />
     <PackageReference Include="BootstrapBlazor.Html2Pdf" Version="9.0.2" />
     <PackageReference Include="BootstrapBlazor.IconPark" Version="9.0.3" />
-    <PackageReference Include="BootstrapBlazor.ImageCropper" Version="9.0.1" />
+    <PackageReference Include="BootstrapBlazor.ImageCropper" Version="9.0.2" />
     <PackageReference Include="BootstrapBlazor.IP2Region" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.JitsiMeet" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.JuHeIpLocatorProvider" Version="9.0.0" />
diff --git a/src/BootstrapBlazor.Server/Components/Samples/ImageCroppers.razor b/src/BootstrapBlazor.Server/Components/Samples/ImageCroppers.razor
index 16d2763af2d..e364264cca1 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/ImageCroppers.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/ImageCroppers.razor
@@ -7,34 +7,50 @@
 <PackageTips Name="BootstrapBlazor.ImageCropper" />
 
 <DemoBlock Title="@Localizer["ImageCropperNormalText"]" Introduction="@Localizer["ImageCropperNormalIntro"]" Name="Normal">
-    <ImageCropper @ref="_cropper" Url="@_images[0]"></ImageCropper>
+    <ImageCropper @ref="_cropper" Url="@_images[0]" Options="_roundOptions1"></ImageCropper>
     <section ignore>
         <BootstrapInputGroup>
-            <Button Text="OK" OnClick="Crop" />
-            <Button Text="@Localizer["ImageCropperResetText"]" OnClick="_cropper.Reset" />
-            <Button Text="@Localizer["ImageCropperReplaceText"]" OnClick="OnClickReplace" />
-            <Button Text="@Localizer["ImageCropperRotateText"]" OnClick="Rotate" />
-            <Button Text="@Localizer["ImageCropperEnableText"]" OnClick="_cropper.Enable" />
-            <Button Text="@Localizer["ImageCropperDisabledText"]" OnClick="_cropper.Disable" />
-            <Button Text="@Localizer["ImageCropperClearText"]" OnClick="_cropper.Clear" />
+            <Button Text="OK" OnClick="Crop"></Button>
+            <Button Text="@Localizer["ImageCropperResetText"]" OnClick="_cropper.Reset"></Button>
+            <Button Text="@Localizer["ImageCropperReplaceText"]" OnClick="OnClickReplace"></Button>
+            <Button Text="@Localizer["ImageCropperRotateText"]" OnClick="Rotate"></Button>
+            <Button Text="@Localizer["ImageCropperEnableText"]" OnClick="_cropper.Enable"></Button>
+            <Button Text="@Localizer["ImageCropperDisabledText"]" OnClick="_cropper.Disable"></Button>
+            <Button Text="@Localizer["ImageCropperClearText"]" OnClick="_cropper.Clear"></Button>
         </BootstrapInputGroup>
+
+        <div class="d-flex mt-3" style="gap: 0.5rem;">
+            <div class="bb-cropper-preview bb-cropper-preview1 bb-cropper-preview-lg"></div>
+            <div class="bb-cropper-preview bb-cropper-preview1 bb-cropper-preview-md"></div>
+            <div class="bb-cropper-preview bb-cropper-preview1 bb-cropper-preview-sm"></div>
+            <div class="bb-cropper-preview bb-cropper-preview1 bb-cropper-preview-xs"></div>
+        </div>
+
         @if (!string.IsNullOrEmpty(_base64String))
         {
-            <img src="@_base64String" style="width: 240px;" />
-            <Textarea Value="@_base64String" rows="3" class="mt-3" />
+            <img src="@_base64String" style="width: 240px; margin-top: 1rem;" />
+            <Textarea Value="@_base64String" rows="3" class="mt-3"></Textarea>
         }
     </section>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["ImageCropperNormalText"]" Introduction="@Localizer["ImageCropperNormalIntro"]" Name="Normal">
-    <ImageCropper @ref="_roundCropper" Url="@_images[0]" CropperShape="ImageCropperShape.Round" Options="_roundOptions" />
+<DemoBlock Title="@Localizer["ImageCropperRoundText"]" Introduction="@Localizer["ImageCropperRoundIntro"]" Name="Round">
+    <ImageCropper @ref="_roundCropper" Url="@_images[0]" Options="_roundOptions2"></ImageCropper>
     <section ignore>
         <BootstrapInputGroup>
-            <Button Text="OK" OnClick="RoundCrop" />
+            <Button Text="OK" OnClick="RoundCrop"></Button>
         </BootstrapInputGroup>
+
+        <div class="d-flex mt-3" style="gap: 0.5rem;">
+            <div class="bb-cropper-preview bb-cropper-preview-round bb-cropper-preview-lg"></div>
+            <div class="bb-cropper-preview bb-cropper-preview-round bb-cropper-preview-md"></div>
+            <div class="bb-cropper-preview bb-cropper-preview-round bb-cropper-preview-sm"></div>
+            <div class="bb-cropper-preview bb-cropper-preview-round bb-cropper-preview-xs"></div>
+        </div>
+
         @if (!string.IsNullOrEmpty(_base64String2))
         {
-            <img src="@_base64String2" style="width: 240px;" />
+            <img src="@_base64String2" style="width: 240px; margin-top: 1rem;" />
         }
     </section>
 </DemoBlock>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/ImageCroppers.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/ImageCroppers.razor.cs
index 37b92bcc899..754826fbc9d 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/ImageCroppers.razor.cs
+++ b/src/BootstrapBlazor.Server/Components/Samples/ImageCroppers.razor.cs
@@ -22,7 +22,9 @@ public partial class ImageCroppers
 
     private string? _base64String2;
 
-    private readonly ImageCropperOption _roundOptions = new() { IsRound = true, Radius = "50%", AspectRatio = 3/4f };
+    private readonly ImageCropperOption _roundOptions1 = new() { AspectRatio = 16 / 9f, Preview = ".bb-cropper-preview1" };
+
+    private readonly ImageCropperOption _roundOptions2 = new() { IsRound = true, Preview = ".bb-cropper-preview-round" };
 
     /// <summary>
     /// <inheritdoc/>
@@ -56,11 +58,7 @@ private async Task RoundCrop()
 
     private Task Rotate() => _cropper.Rotate(90);
 
-    /// <summary>
-    /// GetAttributes
-    /// </summary>
-    /// <returns></returns>
-    protected AttributeItem[] GetAttributes() =>
+    private AttributeItem[] GetAttributes() =>
     [
         new()
         {
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index 7922de981fd..c0767e3afab 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -6679,7 +6679,9 @@
   "BootstrapBlazor.Server.Components.Samples.ImageCroppers": {
     "Title": "Image cropper",
     "ImageCropperNormalText": "Basic usage",
-    "ImageCropperNormalIntro": "Url parameter setting image",
+    "ImageCropperNormalIntro": "The URL of the image can be set by setting the <code>Url</code> parameter. The cropping ratio can be set by setting <code>ImageCropperOption.AspectRatio=16/9f</code>. <code>1</code> is a square.",
+    "ImageCropperRoundText": "Round",
+    "ImageCropperRoundIntro": "Set the cropping mode to circular by setting the <code>IsRound</code> parameter",
     "ImageCropperResetText": "Reset",
     "ImageCropperReplaceText": "Replace",
     "ImageCropperRotateText": "Rotate",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index 70b84d8a675..fbc116486ab 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -6679,7 +6679,9 @@
   "BootstrapBlazor.Server.Components.Samples.ImageCroppers": {
     "Title": "ImageCropper 图像裁剪",
     "ImageCropperNormalText": "基础用法",
-    "ImageCropperNormalIntro": "Url 参数设置图片",
+    "ImageCropperNormalIntro": "通过设置 <code>Url</code> 参数设置图片地址，可通过设置 <code>ImageCropperOption.AspectRatio=16/9f</code> 设置裁剪框比例，<code>1</code> 时为正方形",
+    "ImageCropperRoundText": "圆角",
+    "ImageCropperRoundIntro": "通过设置 <code>IsRound</code> 参数设置裁剪方式为圆形",
     "ImageCropperResetText": "复位",
     "ImageCropperReplaceText": "替换",
     "ImageCropperRotateText": "旋转",