From 33cc3db04288b141d3d044aab78e8c6c8d60660d Mon Sep 17 00:00:00 2001
From: Alireza Hadjar <57192409+AlirezaHadjar@users.noreply.github.com>
Date: Sat, 2 Mar 2024 19:14:40 +0330
Subject: [PATCH] add border radius trick docs (#21)

---
 apps/docs/docs/fundamentals/tips-and-tricks.mdx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/apps/docs/docs/fundamentals/tips-and-tricks.mdx b/apps/docs/docs/fundamentals/tips-and-tricks.mdx
index 812c561..feaefc3 100644
--- a/apps/docs/docs/fundamentals/tips-and-tricks.mdx
+++ b/apps/docs/docs/fundamentals/tips-and-tricks.mdx
@@ -106,3 +106,20 @@ export function ImperativeScrolling() {
 </video>
 
 </HStack>
+
+## Setting Border Radius to `Calendar.Item.Day`
+
+To apply a border radius to the `Calendar.Item.Day` component, it's necessary to specify the radius for all four corners. Here's an example of how to achieve this:
+
+```tsx
+itemDay: {
+  base: () => ({
+    container: {
+      borderTopRightRadius: 10,
+      borderBottomRightRadius: 10,
+      borderTopLeftRadius: 10,
+      borderBottomLeftRadius: 10,
+    },
+  }),
+}
+```