Border Override Workflow

To override border styles in your project, follow these steps:

1. Identify the Border Variable

   • By default, all product border variables are applied out-of-the-box (OOTB).
   • If a particular element requires a different border style in your project, use your browser's inspect element tool to locate the relevant CSS variable.
   • Example inspect element screenshot:

2. Override the Border Variable in design.css

   • Go to your project's design.css file (usually at project-repo/src/design.css).

   • Add the same border variable and provide your overridden value with the !important keyword.

   • Example design.css screenshot:

     

3. Run the Project

   • Start your project with:

     yarn start

   • You should now see the updated border style applied to the element.