fun style

app/page.module.css

@@ -305,7 +305,9 @@
 .messages {
   flex: 1;
   overflow-y: auto;
-  border: 1px solid #ddd;
+  border-style: solid;
+  border-width: 4px;
+  border-image: linear-gradient(#6ee7b7, #3b82f6) 30;
   padding: 25px;
   border-radius: 5px;
 }
@@ -417,3 +419,40 @@
 .bg-blue-500 {
   background-color: #4299e1; /* Approximation of Tailwind's blue-500 */
 }
+
+.border-gradient {
+  /* Size of your element */
+  width: 200px;
+  height: 200px;
+
+  /* Setting up the gradient as a background image */
+  background-image: linear-gradient(90deg, #6ee7b7, #3b82f6);
+
+  /* Positioning and sizing the pseudo-element to match the parent */
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  /* Adding the border */
+  padding: 10px;
+}
+
+.border-gradient::after {
+  /* Creating the pseudo-element */
+  content: "";
+  position: absolute;
+  top: -10px;
+  left: -10px;
+  bottom: -10px;
+  right: -10px;
+
+  /* Applying the gradient to the border */
+  background-image: inherit;
+  background-clip: padding-box, border-box;
+  background-origin: padding-box, border-box;
+  box-decoration-break: clone;
+
+  /* Adding a transparent border */
+  border: solid 10px transparent;
+}