Foundation CSS Prototyping Utilities - Border

Introduction

The Foundation CSS Prototyping Utilities is a collection of pre-built classes and utility functions that provide a quick and easy way to prototype and style your web projects. In this guide, we will focus on the border utilities available in Foundation.

Border Utilities

The border utilities in Foundation allow you to quickly add borders to elements or modify existing borders. These utilities are designed to be simple and customizable, allowing you to achieve the desired border styles for your project.

Classes

The following classes are available for adding borders:

• .border-none: Removes the border from an element.
• .border: Adds a default border to an element.
• .border-solid: Adds a solid border to an element.
• .border-dashed: Adds a dashed border to an element.
• .border-dotted: Adds a dotted border to an element.

You can combine these classes with other utility classes to achieve the desired border style. For example, border-solid border-2 adds a solid 2px border to an element.

Modifiers

Foundation also provides border modifiers that allow you to further customize the border:

• .border-rounded: Adds rounded corners to an element's border.
• .border-rounded-x: Adds horizontally rounded corners to an element's border.
• .border-rounded-y: Adds vertically rounded corners to an element's border.

You can use these modifiers in combination with the border classes to create borders with specific shapes or styles.

Sizing

To control the size of the borders, you can use the sizing classes available in Foundation:

• .border-0: Sets the border width to 0, effectively removing the border.
• .border-1: Sets the border width to 1px.
• .border-2: Sets the border width to 2px.
• .border-3: Sets the border width to 3px.
• .border-4: Sets the border width to 4px.
• .border-5: Sets the border width to 5px.

You can adjust the border size by applying the appropriate sizing class.

Usage

To use the border utilities in Foundation, simply add the desired classes to your HTML elements. For example:

<div class="border border-solid border-rounded border-2">Border example</div>

This will add a solid 2px border with rounded corners to the specified div element.

Conclusion

The border utilities in Foundation CSS Prototyping Utilities provide a convenient way to add and customize borders for your web projects. With a wide range of classes and modifiers, you can easily style your elements to achieve the desired visual effects.