Border Thickness (Width)

Control border width or thickness for styling.

Usage:

@border thick-*;
@border thick-top-*;
@border thick-right-*;
@border thick-bottom-*;
@border thick-left-*;
@border thick-x-*;
@border thick-y-*;
@border thick-bl-*;
@border thick-bls-*;
@border thick-ble-*;
@border thick-bi-*;
@border thick-bis-*;
@border thick-bie-*;

info

This page contains only the property configuration reference. Complete documentation and usage examples will be added progressively in future updates.

Reference

shilp.config.js
/** @type {import('shilpcss/types').ShilpConfig} */
const shilpConfig = {
  source: "react",

  properties: {
    border: {
      thick: {
        DEFAULT: {
          property: "border-width: <v><i>;",
          resolve: "spacing",
          themeKey: "thickness",
          values: {},
        },
        top: {
          property: "border-top-width: <v><i>;",
          resolve: "spacing",
          themeKey: "thickness",
          values: {},
        },
        right: {
          property: "border-right-width: <v><i>;",
          resolve: "spacing",
          themeKey: "thickness",
          values: {},
        },
        bottom: {
          property: "border-bottom-width: <v><i>;",
          resolve: "spacing",
          themeKey: "thickness",
          values: {},
        },
        left: {
          property: "border-left-width: <v><i>;",
          resolve: "spacing",
          themeKey: "thickness",
          values: {},
        },
        x: {
          property: `
						border-left-width: <v><i>;
						border-right-width: <v><i>;
					`,
          resolve: "spacing",
          themeKey: "thickness",
          values: {},
        },
        y: {
          property: `
						border-top-width: <v><i>;
						border-bottom-width: <v><i>;
					`,
          resolve: "spacing",
          themeKey: "thickness",
          values: {},
        },
        bl: {
          property: "border-block-width: <v><i>;",
          resolve: "spacing",
          themeKey: "thickness",
          values: {},
        },
        bls: {
          property: "border-block-start-width: <v><i>;",
          resolve: "spacing",
          themeKey: "thickness",
          values: {},
        },
        ble: {
          property: "border-block-end-width: <v><i>;",
          resolve: "spacing",
          themeKey: "thickness",
          values: {},
        },
        bi: {
          property: "border-inline-width: <v><i>;",
          resolve: "spacing",
          themeKey: "thickness",
          values: {},
        },
        bis: {
          property: "border-inline-start-width: <v><i>;",
          resolve: "spacing",
          themeKey: "thickness",
          values: {},
        },
        bie: {
          property: "border-inline-end-width: <v><i>;",
          resolve: "spacing",
          themeKey: "thickness",
          values: {},
        },
      },
    },
  },
};

export default shilpConfig;