Add CSS Border-Image Generator component and update sidebar

src/App.jsx

@@ -33,6 +33,7 @@ import ListResources from "./pages/ResourceHub/resourcehub/ListResources";
 import Base64Image from "./pages/DevUtilities/devutilities/Base64Image";
 import Base64Url from "./pages/DevUtilities/devutilities/Base64Url";
 import BcryptGenerator from "./pages/DevUtilities/devutilities/BcryptGenerator";
+import BorderImageGenerator from "./pages/DevUtilities/devutilities/BorderImageGenerator";
 import ChmodCalculator from "./pages/DevUtilities/devutilities/ChmodCalculator";
 import ClipPathMaker from "./pages/DevUtilities/devutilities/ClipPathMaker";
 import CodeSandbox from "./pages/DevUtilities/devutilities/CodeSandbox";
@@ -501,6 +502,10 @@ function AppInner({ toggleHUD, hudVisible }) {
                 path="/devutilities/css-gradient"
                 element={<CssGradientGenerator />}
               />
+              <Route
+                path="/devutilities/border-image"
+                element={<BorderImageGenerator />}
+              />
               <Route
                 path="/devutilities/glassmorphism"
                 element={<CssGlassmorphismPlayground />}

src/config/sidebarSections.js

@@ -297,6 +297,12 @@ const SIDEBAR_SECTIONS = [
         description: "Create beautiful CSS gradients with live preview",
         path: "/devutilities/css-gradient",
       },
+      {
+        label: "CSS Border-Image Generator",
+        description:
+          "Design custom sliced image borders and generate copy-ready CSS properties visually.",
+        path: "/devutilities/border-image",
+      },
       {
         label: "Glassmorphism Playground",
         description: "Design glassmorphism effects with shadows and blur",

src/pages/DevUtilities/DevUtilities.jsx

@@ -964,6 +964,27 @@ const DevUtilities = () => {
         </svg>
       ),
     },
+    {
+      title: "CSS Border-Image Generator",
+      description:
+        "Design custom sliced image borders and generate copy-ready CSS properties visually.",
+      path: "/devutilities/border-image",
+      icon: (
+        <svg
+          className="w-6 h-6"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M4 8V6a2 2 0 012-2h2m8 0h2a2 2 0 012 2v2m0 8v2a2 2 0 01-2 2h-2m-8 0H6a2 2 0 01-2-2v-2m5-5h6m-6 3h6"
+          />
+        </svg>
+      ),
+    },
     {
       title: "Password Generator",
       description: