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
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;