diff --git a/example/react-native-css-env.d.ts b/example/react-native-css-env.d.ts
index 30b8ae6..f4058f3 100644
--- a/example/react-native-css-env.d.ts
+++ b/example/react-native-css-env.d.ts
@@ -1,4 +1,4 @@
-// This file is different in the example, please use the auto generated file
-/// <reference types="./example-env" />
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../types.d.ts" />
 
 // NOTE: This file should not be edited and should be committed with your source code. It is generated by react-native-css. If you need to move or disable this file, please see the documentation.
diff --git a/example/tsconfig.json b/example/tsconfig.json
index 6d42ab1..ffe9c15 100644
--- a/example/tsconfig.json
+++ b/example/tsconfig.json
@@ -9,6 +9,6 @@
     "index.js",
     "postcss.config.mjs",
     "react-native-css-env.d.ts",
-    "../types.d.ts"
+    "example-env.d.ts"
   ]
 }
\ No newline at end of file
diff --git a/src/__tests__/vendor/tailwind/borders.test.tsx b/src/__tests__/vendor/tailwind/borders.test.tsx
new file mode 100644
index 0000000..7546218
--- /dev/null
+++ b/src/__tests__/vendor/tailwind/borders.test.tsx
@@ -0,0 +1,424 @@
+import { renderCurrentTest, renderSimple } from "./_tailwind";
+
+describe("Border - Border Radius", () => {
+  test("rounded-sm", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { borderRadius: 3.5 } },
+    });
+  });
+  test("rounded-t-sm", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { borderTopLeftRadius: 3.5, borderTopRightRadius: 3.5 } },
+    });
+  });
+  test("rounded-b-sm", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: { borderBottomLeftRadius: 3.5, borderBottomRightRadius: 3.5 },
+      },
+    });
+  });
+  test("rounded-full", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { borderRadius: 9999 } },
+    });
+  });
+});
+
+describe("Border - Border Width", () => {
+  test("border-1", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { borderWidth: 1, borderStyle: "solid" } },
+    });
+  });
+  test("border-x-1", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: {
+          borderInlineWidth: 1,
+          borderInlineStyle: "solid",
+        },
+      },
+    });
+  });
+  test("border-y-1", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: {
+          borderBlockWidth: 1,
+          borderBlockStyle: "solid",
+        },
+      },
+    });
+  });
+  test("border-s-1", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: { borderInlineStartWidth: 1, borderInlineStartStyle: "solid" },
+      },
+    });
+  });
+  test("border-e-1", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: { borderInlineEndWidth: 1, borderInlineEndStyle: "solid" },
+      },
+    });
+  });
+  test("border-t-1", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: { borderTopWidth: 1, borderTopStyle: "solid" },
+      },
+    });
+  });
+  test("border-r-1", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: { borderRightWidth: 1, borderRightStyle: "solid" },
+      },
+    });
+  });
+  test("border-b-1", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { borderBottomWidth: 1, borderBottomStyle: "solid" } },
+    });
+  });
+  test("border-l-1", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { borderLeftWidth: 1, borderLeftStyle: "solid" } },
+    });
+  });
+  test("border-2", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { borderWidth: 2, borderStyle: "solid" } },
+    });
+  });
+  test("border-x-2", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: {
+          borderInlineWidth: 2,
+          borderInlineStyle: "solid",
+        },
+      },
+    });
+  });
+  test("border-y-2", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: {
+          borderBlockWidth: 2,
+          borderBlockStyle: "solid",
+        },
+      },
+    });
+  });
+  test("border-s-2", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: { borderInlineStartWidth: 2, borderInlineStartStyle: "solid" },
+      },
+    });
+  });
+  test("border-e-2", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: { borderInlineEndWidth: 2, borderInlineEndStyle: "solid" },
+      },
+    });
+  });
+  test("border-t-2", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { borderTopWidth: 2, borderTopStyle: "solid" } },
+    });
+  });
+  test("border-r-2", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { borderRightWidth: 2, borderRightStyle: "solid" } },
+    });
+  });
+  test("border-b-2", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { borderBottomWidth: 2, borderBottomStyle: "solid" } },
+    });
+  });
+  test("border-l-2", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { borderLeftWidth: 2, borderLeftStyle: "solid" } },
+    });
+  });
+});
+
+describe("Border - Border Color", () => {
+  test("border-white", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { borderColor: "#fff" } },
+    });
+  });
+  test("border-x-white", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: {
+          borderInlineColor: "#fff",
+        },
+      },
+    });
+  });
+  test("border-y-white", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: {
+          borderBlockColor: "#fff",
+        },
+      },
+    });
+  });
+  test("border-t-white", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { borderTopColor: "#fff" } },
+    });
+  });
+  test("border-b-white", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { borderBottomColor: "#fff" } },
+    });
+  });
+  test("border-l-white", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { borderLeftColor: "#fff" } },
+    });
+  });
+  test("border-r-white", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { borderRightColor: "#fff" } },
+    });
+  });
+  test("border-current", async () => {
+    expect(
+      await renderSimple({ className: "border-current text-red-500" }),
+    ).toStrictEqual({
+      props: {
+        style: {
+          borderColor: "#fb2c36",
+          color: "#fb2c36",
+        },
+      },
+    });
+  });
+  test("border-inherit", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      warnings: { values: { "border-color": "inherit" } },
+    });
+  });
+
+  test("border-x-current", async () => {
+    expect(
+      await renderSimple({ className: "border-x-current text-red-500" }),
+    ).toStrictEqual({
+      props: {
+        style: {
+          borderLeftColor: "#fb2c36",
+          borderRightColor: "#fb2c36",
+          color: "#fb2c36",
+        },
+      },
+    });
+  });
+
+  test("border-x-inherit", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      warnings: {
+        values: {
+          "border-inline-color": "inherit",
+        },
+      },
+    });
+  });
+  test("border-y-current", async () => {
+    expect(
+      await renderSimple({ className: "border-y-current text-red-500" }),
+    ).toStrictEqual({
+      props: {
+        style: {
+          borderBottomColor: "#fb2c36",
+          borderTopColor: "#fb2c36",
+          color: "#fb2c36",
+        },
+      },
+    });
+  });
+  test("border-y-inherit", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      warnings: {
+        values: {
+          "border-block-color": "inherit",
+        },
+      },
+    });
+  });
+  test("border-t-current", async () => {
+    expect(
+      await renderSimple({ className: "border-t-current text-red-500" }),
+    ).toStrictEqual({
+      props: {
+        style: {
+          borderTopColor: "#fb2c36",
+          color: "#fb2c36",
+        },
+      },
+    });
+  });
+
+  test("border-t-inherit", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      warnings: { values: { "border-top-color": "inherit" } },
+    });
+  });
+
+  test("border-b-current", async () => {
+    expect(
+      await renderSimple({ className: "border-b-current text-red-500" }),
+    ).toStrictEqual({
+      props: {
+        style: {
+          borderBottomColor: "#fb2c36",
+          color: "#fb2c36",
+        },
+      },
+    });
+  });
+
+  test("border-b-inherit", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      warnings: { values: { "border-bottom-color": "inherit" } },
+    });
+  });
+
+  test("border-l-current", async () => {
+    expect(
+      await renderSimple({ className: "border-l-current text-red-500" }),
+    ).toStrictEqual({
+      props: {
+        style: {
+          borderLeftColor: "#fb2c36",
+          color: "#fb2c36",
+        },
+      },
+    });
+  });
+
+  test("border-l-inherit", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      warnings: { values: { "border-left-color": "inherit" } },
+    });
+  });
+
+  test("border-r-current", async () => {
+    expect(
+      await renderSimple({
+        className: "border-r-current text-red-500",
+      }),
+    ).toStrictEqual({
+      props: {
+        style: {
+          borderRightColor: "#fb2c36",
+          color: "#fb2c36",
+        },
+      },
+    });
+  });
+
+  test("border-r-inherit", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      warnings: { values: { "border-right-color": "inherit" } },
+    });
+  });
+});
+
+describe("Borders - Border Style", () => {
+  test("border-solid", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { borderStyle: "solid" } },
+    });
+  });
+  test("border-dashed", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { borderStyle: "dashed" } },
+    });
+  });
+  test("border-dotted", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: { style: { borderStyle: "dotted" } },
+    });
+  });
+  test("border-none", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      warnings: { values: { "border-style": "none" } },
+    });
+  });
+  test("border-double", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      warnings: { values: { "border-style": "double" } },
+    });
+  });
+  test("border-hidden", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {},
+      warnings: { values: { "border-style": "hidden" } },
+    });
+  });
+});
+
+describe.skip("Borders - Divide Width", () => {
+  // TODO
+});
+
+describe.skip("Borders - Divide Color", () => {
+  // TODO
+});
+
+describe.skip("Borders - Divide Style", () => {
+  // TODO
+});
+
+describe.skip("Borders - Outline Width", () => {
+  // TODO
+});
+
+describe.skip("Borders - Outline Color", () => {
+  // TODO
+});
+
+describe.skip("Borders - Outline Style", () => {
+  // TODO
+});
+
+describe.skip("Borders - Outline Offset", () => {
+  // TODO
+});
+
+describe.skip("Borders - Ring Width", () => {
+  // TODO
+});
+
+describe.skip("Borders - Ring Color", () => {
+  // TODO
+});
+
+describe.skip("Borders - Ring Offset Width", () => {
+  // TODO
+});
+
+describe.skip("Borders - Ring Offset Color", () => {
+  // TODO
+});
diff --git a/src/compiler/declarations.ts b/src/compiler/declarations.ts
index b60dd11..60d6cd8 100644
--- a/src/compiler/declarations.ts
+++ b/src/compiler/declarations.ts
@@ -101,6 +101,7 @@ const parsers: {
   "border-block-end-width": parseBorderSideWidthDeclaration,
   "border-block-start": parseBorderBlockStart,
   "border-block-start-color": parseColorDeclaration,
+  "border-block-start-style": parseBorderStyleDeclaration,
   "border-block-start-width": parseBorderSideWidthDeclaration,
   "border-block-style": parseBorderBlockStyle,
   "border-block-width": parseBorderBlockWidth,
@@ -435,18 +436,14 @@ function parseBorderBlock(
   { value }: DeclarationType<"border-block">,
   builder: StylesheetBuilder,
 ) {
-  builder.addDescriptor("border-top-color", parseColor(value.color, builder));
+  builder.addDescriptor("border-block-color", parseColor(value.color, builder));
   builder.addDescriptor(
-    "border-bottom-color",
-    parseColor(value.color, builder),
-  );
-  builder.addDescriptor(
-    "border-top-width",
+    "border-block-width",
     parseBorderSideWidth(value.width, builder),
   );
   builder.addDescriptor(
-    "border-bottom-width",
-    parseBorderSideWidth(value.width, builder),
+    "border-block-style",
+    parseBorderStyle(value.style, builder),
   );
 }
 
@@ -454,9 +451,12 @@ function parseBorderBlockStart(
   { value }: DeclarationType<"border-block-start">,
   builder: StylesheetBuilder,
 ) {
-  builder.addDescriptor("border-top-color", parseColor(value.color, builder));
   builder.addDescriptor(
-    "border-top-width",
+    "border-block-start-color",
+    parseColor(value.color, builder),
+  );
+  builder.addDescriptor(
+    "border-block-start-width",
     parseBorderSideWidth(value.width, builder),
   );
 }
@@ -466,11 +466,11 @@ function parseBorderBlockEnd(
   builder: StylesheetBuilder,
 ) {
   builder.addDescriptor(
-    "border-bottom-color",
+    "border-block-end-color",
     parseColor(value.color, builder),
   );
   builder.addDescriptor(
-    "border-bottom-width",
+    "border-block-end-width",
     parseBorderSideWidth(value.width, builder),
   );
 }
@@ -479,38 +479,54 @@ function parseBorderInline(
   { value }: DeclarationType<"border-inline">,
   builder: StylesheetBuilder,
 ) {
-  builder.addDescriptor("border-left-color", parseColor(value.color, builder));
-  builder.addDescriptor("border-right-color", parseColor(value.color, builder));
   builder.addDescriptor(
-    "border-left-width",
-    parseBorderSideWidth(value.width, builder),
+    "border-inline-color",
+    parseColor(value.color, builder),
   );
   builder.addDescriptor(
-    "border-right-width",
+    "border-inline-width",
     parseBorderSideWidth(value.width, builder),
   );
+  builder.addDescriptor(
+    "border-inline-style",
+    parseBorderStyle(value.style, builder),
+  );
 }
 
 function parseBorderInlineStart(
   { value }: DeclarationType<"border-inline-start">,
   builder: StylesheetBuilder,
 ) {
-  builder.addDescriptor("border-left-color", parseColor(value.color, builder));
   builder.addDescriptor(
-    "border-left-width",
+    "border-inline-start-color",
+    parseColor(value.color, builder),
+  );
+  builder.addDescriptor(
+    "border-inline-start-width",
     parseBorderSideWidth(value.width, builder),
   );
+  builder.addDescriptor(
+    "border-inline-start-style",
+    parseBorderStyle(value.style, builder),
+  );
 }
 
 function parseBorderInlineEnd(
   { value }: DeclarationType<"border-inline-end">,
   builder: StylesheetBuilder,
 ) {
-  builder.addDescriptor("border-right-color", parseColor(value.color, builder));
   builder.addDescriptor(
-    "border-right-width",
+    "border-inline-end-color",
+    parseColor(value.color, builder),
+  );
+  builder.addDescriptor(
+    "border-inline-end-width",
     parseBorderSideWidth(value.width, builder),
   );
+  builder.addDescriptor(
+    "border-inline-end-style",
+    parseBorderStyle(value.style, builder),
+  );
 }
 
 export function parseBorderInlineWidth(
@@ -518,13 +534,9 @@ export function parseBorderInlineWidth(
   builder: StylesheetBuilder,
 ) {
   builder.addDescriptor(
-    "border-left-width",
+    "border-inline-width",
     parseBorderSideWidth(declaration.value.start, builder),
   );
-  builder.addDescriptor(
-    "border-right-width",
-    parseBorderSideWidth(declaration.value.end, builder),
-  );
 }
 
 export function parseBorderInlineStyle(
@@ -537,16 +549,23 @@ export function parseBorderInlineStyle(
 ) {
   if (typeof declaration.value === "string") {
     builder.addDescriptor(
-      "border-style",
+      declaration.property,
       parseBorderStyle(declaration.value, builder),
     );
   } else if (declaration.value.start === declaration.value.end) {
     builder.addDescriptor(
-      "border-style",
+      declaration.property,
       parseBorderStyle(declaration.value.start, builder),
     );
   } else {
-    builder.addWarning("property", "border-inline-style");
+    builder.addDescriptor(
+      "border-inline-start-style",
+      parseBorderStyle(declaration.value.start, builder),
+    );
+    builder.addDescriptor(
+      "border-inline-end-style",
+      parseBorderStyle(declaration.value.end, builder),
+    );
   }
 }
 
@@ -2003,12 +2022,9 @@ export function parseOverflow(
 }
 
 export function parseBorderStyleDeclaration(
-  declaration: DeclarationType<
-    | "border-style"
-    | "border-left-style"
-    | "border-right-style"
-    | "border-top-style"
-    | "border-bottom-style"
+  declaration: Extract<
+    DeclarationType<Declaration["property"]>,
+    { value: LineStyle | BorderStyle }
   >,
   builder: StylesheetBuilder,
 ) {
@@ -2046,27 +2062,29 @@ export function parseBorderBlockWidth(
   declaration: DeclarationType<"border-block-width">,
   builder: StylesheetBuilder,
 ) {
-  builder.addDescriptor(
-    "border-top-width",
-    parseBorderSideWidth(declaration.value.start, builder),
-  );
-  builder.addDescriptor(
-    "border-bottom-width",
-    parseBorderSideWidth(declaration.value.end, builder),
-  );
+  const start = parseBorderSideWidth(declaration.value.start, builder);
+  const end = parseBorderSideWidth(declaration.value.end, builder);
+
+  if (start === end) {
+    builder.addDescriptor("border-block-width", start);
+  } else {
+    builder.addDescriptor("border-block-start-width", start);
+    builder.addDescriptor("border-block-end-width", end);
+  }
 }
 
 function parseBorderBlockStyle(
   declaration: DeclarationType<"border-block-style">,
   builder: StylesheetBuilder,
 ) {
-  if (declaration.value.start === declaration.value.end) {
-    builder.addDescriptor(
-      "border-style",
-      parseBorderStyle(declaration.value.start, builder),
-    );
+  const start = parseBorderStyle(declaration.value.start, builder);
+  const end = parseBorderStyle(declaration.value.end, builder);
+
+  if (start == end) {
+    builder.addDescriptor("border-block-style", start);
   } else {
-    builder.addWarning("property", "border-block-style");
+    builder.addDescriptor("border-block-start-style", start);
+    builder.addDescriptor("border-block-end-style", end);
   }
 }
 
@@ -2083,21 +2101,10 @@ export function parseBorderSideWidthDeclaration(
   >,
   builder: StylesheetBuilder,
 ) {
-  if (declaration.property.includes("block")) {
-    builder.addDescriptor(
-      `border-${declaration.property.includes("start") ? "top" : "bottom"}-width`,
-      parseBorderSideWidth(declaration.value, builder),
-    );
-    return;
-  } else if (declaration.property.includes("inline")) {
-    builder.addDescriptor(
-      `border-${declaration.property.includes("start") ? "left" : "right"}-width`,
-      parseBorderSideWidth(declaration.value, builder),
-    );
-    return;
-  } else {
-    return parseBorderSideWidth(declaration.value, builder);
-  }
+  builder.addDescriptor(
+    declaration.property,
+    parseBorderSideWidth(declaration.value, builder),
+  );
 }
 
 export function parseBorderSideWidth(