configurable borderRadius for Button and Dropdown

src/components/Button.svelte

@@ -3,13 +3,14 @@
   export let border = false;
   export let textAlign = "left";
   export let whiteSpace = "nowrap";
+  export let borderRadius = "8px";
 </script>
 
 <button 
   onclick={onClick} 
   class="btn" 
   class:borderless={!border} 
-  style={`text-align: ${textAlign}; white-space: ${whiteSpace};`}
+  style={`text-align: ${textAlign}; white-space: ${whiteSpace}; border-radius: ${borderRadius};`}
   {...$$restProps}
 >
   <slot />
@@ -19,7 +20,6 @@
   .btn {
     background: var(--white);
     color: var(--black);
-    border-radius: 8px;
     border: 1.5px solid transparent;
     padding: 0.6em 1.2em;
     font-weight: 500;

src/components/Dropdown.svelte

@@ -1,9 +1,9 @@
 <script>
   import Button from "./Button.svelte";
 
-  // Props
   export let name = "";
   export let border = false;
+  export let borderRadius = "8px";
 
   let isOpen = false;
 
@@ -21,7 +21,7 @@
 </script>
 
 <div class="relative inline-block" on:focusout={handleFocusOut}>
-  <Button onClick={toggle} border={border}>
+  <Button borderRadius={borderRadius} onClick={toggle} border={border}>
     {name}
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -42,6 +42,7 @@
 
   <div
     class="absolute mt-2 rounded-md shadow-lg bg-white ring-1 ring-black/5 overflow-hidden flex flex-col"
+    style="border-radius: {borderRadius}"
     style:visibility={isOpen ? "visible" : "hidden"}
   >
     <slot />