Border Style

Define border styles like solid, dashed, dotted and more.

Usage:

@border style-*;
@border style-top-*;
@border style-right-*;
@border style-bottom-*;
@border style-left-*;
@border style-x-*;
@border style-y-*;
@border style-bl-*;
@border style-bls-*;
@border style-ble-*;
@border style-bi-*;
@border style-bis-*;
@border style-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: {
      style: {
        DEFAULT: {
          property: "border-style: <v><i>;",
          themeKey: "style",
          values: {},
        },
        top: {
          property: "border-top-style: <v><i>;",
          themeKey: "style",
          values: {},
        },
        right: {
          property: "border-right-style: <v><i>;",
          themeKey: "style",
          values: {},
        },
        bottom: {
          property: "border-bottom-style: <v><i>;",
          themeKey: "style",
          values: {},
        },
        left: {
          property: "border-left-style: <v><i>;",
          themeKey: "style",
          values: {},
        },
        x: {
          property: `
						border-left-style: <v><i>;
						border-right-style: <v><i>;
					`,
          themeKey: "style",
          values: {},
        },
        y: {
          property: `
						border-top-style: <v><i>;
						border-bottom-style: <v><i>;
					`,
          themeKey: "style",
          values: {},
        },
        bl: {
          property: "border-block-style: <v><i>;",
          themeKey: "style",
          values: {},
        },
        bls: {
          property: "border-block-start-style: <v><i>;",
          themeKey: "style",
          values: {},
        },
        ble: {
          property: "border-block-end-style: <v><i>;",
          themeKey: "style",
          values: {},
        },
        bi: {
          property: "border-inline-style: <v><i>;",
          themeKey: "style",
          values: {},
        },
        bis: {
          property: "border-inline-start-style: <v><i>;",
          themeKey: "style",
          values: {},
        },
        bie: {
          property: "border-inline-end-style: <v><i>;",
          themeKey: "style",
          values: {},
        },
      },
    },
  },
};

export default shilpConfig;