borders

Border utilities for Tailwind CSS

Border Radius

Control the border radius of elements using the rounded utilities:

Border Radius Scales

Define the named scales for border radius:

RADIUS_SCALES = [ # Border radius named scales
    NamedScale("xs", "--radius-xs", "0.125rem (2px)"),
    NamedScale("sm", "--radius-sm", "0.25rem (4px)"),
    NamedScale("md", "--radius-md", "0.375rem (6px)"),
    NamedScale("lg", "--radius-lg", "0.5rem (8px)"),
    NamedScale("xl", "--radius-xl", "0.75rem (12px)"),
    NamedScale("2xl", "--radius-2xl", "1rem (16px)"),
    NamedScale("3xl", "--radius-3xl", "1.5rem (24px)"),
    NamedScale("4xl", "--radius-4xl", "2rem (32px)")
]

RADIUS_CONFIG = ScaleConfig( # Border radius configuration
    numeric=False,  # No numeric scales for radius
    decimals=False,
    fractions=False,
    named=RADIUS_SCALES,
    special={
        "none": "none",
        "full": "full"
    },
    negative=False
)

Border Radius Factory

Create the border radius factory with support for all directional and corner variants:

---

RoundedFactory

def RoundedFactory(
    doc:Optional=None, # Optional documentation string
):

Factory for creating border radius utilities with all variants.

# Create the main rounded factory
rounded = RoundedFactory("Border radius utilities for controlling the roundness of element corners")

Test Border Radius Utilities

---

test_borders_radius_examples

def test_borders_radius_examples(
    
):

Test border radius utilities with all variants.

def test_borders_radius_examples():
    """Test border radius utilities with all variants."""
    # Test all corners
    assert str(rounded()) == "rounded"
    assert str(rounded.xs) == "rounded-xs"
    assert str(rounded.sm) == "rounded-sm"
    assert str(rounded.md) == "rounded-md"
    assert str(rounded.lg) == "rounded-lg"
    assert str(rounded.xl) == "rounded-xl"
    assert str(rounded._2xl) == "rounded-2xl"
    assert str(rounded._3xl) == "rounded-3xl"
    assert str(rounded._4xl) == "rounded-4xl"
    assert str(rounded.none) == "rounded-none"
    assert str(rounded.full) == "rounded-full"
    
    # Test with function call
    assert str(rounded("md")) == "rounded-md"
    assert str(rounded("10px")) == "rounded-[10px]"
    assert str(rounded("--custom-radius")) == "rounded-(--custom-radius)"
    
    # Test directional variants
    assert str(rounded.t.lg) == "rounded-t-lg"
    assert str(rounded.r.xl) == "rounded-r-xl"
    assert str(rounded.b.sm) == "rounded-b-sm"
    assert str(rounded.l.md) == "rounded-l-md"
    
    # Test logical directional variants
    assert str(rounded.s.lg) == "rounded-s-lg"
    assert str(rounded.e.xl) == "rounded-e-xl"
    
    # Test corner variants
    assert str(rounded.tl.lg) == "rounded-tl-lg"
    assert str(rounded.tr.md) == "rounded-tr-md"
    assert str(rounded.br.sm) == "rounded-br-sm"
    assert str(rounded.bl.xl) == "rounded-bl-xl"
    
    # Test logical corner variants
    assert str(rounded.ss.lg) == "rounded-ss-lg"
    assert str(rounded.se.md) == "rounded-se-md"
    assert str(rounded.ee.sm) == "rounded-ee-sm"
    assert str(rounded.es.xl) == "rounded-es-xl"
    
    # Test special values
    assert str(rounded.t.none) == "rounded-t-none"
    assert str(rounded.br.full) == "rounded-br-full"
    
    # Test arbitrary values
    assert str(rounded.tl("1.5rem")) == "rounded-tl-[1.5rem]"
    assert str(rounded.b("calc(0.5rem + 2px)")) == "rounded-b-[calc(0.5rem + 2px)]"

# Run the tests
test_borders_radius_examples()

Border Width

Control the width of element borders using the border utilities:

Border Width Configuration

Border Width Utility

A specialized utility for border width that handles the default value (1px when no value is specified):

---

BorderWidthUtility

def BorderWidthUtility(
    prefix:str, # The utility prefix (e.g., 'border', 'border-t')
    config:ScaleConfig=ScaleConfig(numeric=True, decimals=False, fractions=False, named=None, special={}, negative=False), # Configuration for valid values
    has_default:bool=True, # Whether this utility has a default value (1px)
):

Utility class for border width with default value support.

Border Width Factory

Create the border width factory with directional support:

---

BorderDirectionalFactory

def BorderDirectionalFactory(
    prefix:str, # The utility prefix (e.g., 'border-t')
    doc:str, # Documentation
):

Factory for directional border width utilities.

---

BorderWidthFactory

def BorderWidthFactory(
    doc:Optional=None, # Optional documentation string
):

Factory for creating border width utilities with directional variants.

# Create the main border width factory
border = BorderWidthFactory("Border width utilities for controlling the width of element borders")

Test Border Width Utilities

---

test_borders_width_examples

def test_borders_width_examples(
    
):

Test border width utilities with all variants.

def test_borders_width_examples():
    """Test border width utilities with all variants."""
    # Test default border (1px)
    assert str(border()) == "border"
    assert str(border.t()) == "border-t"
    assert str(border.r()) == "border-r"
    assert str(border.b()) == "border-b"
    assert str(border.l()) == "border-l"
    assert str(border.x()) == "border-x"
    assert str(border.y()) == "border-y"
    assert str(border.s()) == "border-s"
    assert str(border.e()) == "border-e"
    
    # Test numeric values
    assert str(border._0) == "border-0"
    assert str(border._2) == "border-2"
    assert str(border._4) == "border-4"
    assert str(border._8) == "border-8"
    
    # Test directional with numeric values
    assert str(border.t._0) == "border-t-0"
    assert str(border.r._2) == "border-r-2"
    assert str(border.b._4) == "border-b-4"
    assert str(border.l._8) == "border-l-8"
    
    # Test logical directions
    assert str(border.x._2) == "border-x-2"
    assert str(border.y._4) == "border-y-4"
    assert str(border.s._2) == "border-s-2"
    assert str(border.e._4) == "border-e-4"
    
    # Test with function call
    assert str(border(2)) == "border-2"
    assert str(border.t(4)) == "border-t-4"
    assert str(border.x(0)) == "border-x-0"
    
    # Test arbitrary values
    assert str(border("3px")) == "border-[3px]"
    assert str(border.t("0.5rem")) == "border-t-[0.5rem]"
    # assert str(border.x("thin")) == "border-x-[thin]"
    
    # Test custom properties
    assert str(border("--border-width")) == "border-(--border-width)"
    assert str(border.y("--custom-width")) == "border-y-(--custom-width)"

# Run the tests
test_borders_width_examples()

Divide Utilities

Add borders between child elements using the divide utilities:

Divide Width Factory

---

DivideFactory

def DivideFactory(
    
):

Factory for creating divide utilities that add borders between children.

# Create the divide factory
divide = DivideFactory()

Test Divide Utilities

---

test_borders_divide_examples

def test_borders_divide_examples(
    
):

Test divide utilities for adding borders between children.

def test_borders_divide_examples():
    """Test divide utilities for adding borders between children."""
    # Test default divide (1px)
    assert str(divide.x()) == "divide-x"
    assert str(divide.y()) == "divide-y"
    
    # Test numeric values
    assert str(divide.x._0) == "divide-x-0"
    assert str(divide.x._2) == "divide-x-2"
    assert str(divide.x._4) == "divide-x-4"
    assert str(divide.x._8) == "divide-x-8"
    
    assert str(divide.y._0) == "divide-y-0"
    assert str(divide.y._2) == "divide-y-2"
    assert str(divide.y._4) == "divide-y-4"
    assert str(divide.y._8) == "divide-y-8"
    
    # Test with function call
    assert str(divide.x(2)) == "divide-x-2"
    assert str(divide.y(4)) == "divide-y-4"
    
    # Test arbitrary values
    assert str(divide.x("3px")) == "divide-x-[3px]"
    assert str(divide.y("0.5rem")) == "divide-y-[0.5rem]"
    
    # Test custom properties
    assert str(divide.x("--divide-width")) == "divide-x-(--divide-width)"
    assert str(divide.y("--custom-divide")) == "divide-y-(--custom-divide)"
    
    # Test reverse utilities
    assert str(divide.x_reverse) == "divide-x-reverse"
    assert str(divide.y_reverse) == "divide-y-reverse"

# Run the tests
test_borders_divide_examples()

Border Color

Control the color of element borders using the border color utilities:

Border Color Factory

Create a comprehensive border color factory with directional support:

---

BorderColorFactory

def BorderColorFactory(
    doc:Optional=None, # Optional documentation string
):

Factory for creating border color utilities with directional variants.

# Create the main border color factory
border_color = BorderColorFactory("Border color utilities for controlling the color of element borders")

Test Border Color Utilities

---

test_borders_color_examples

def test_borders_color_examples(
    
):

Test border color utilities with all variants.

def test_borders_color_examples():
    """Test border color utilities with all variants."""
    # Test basic colors for all sides
    assert str(border_color.red._500) == "border-red-500"
    assert str(border_color.blue._300) == "border-blue-300"
    assert str(border_color.green._950) == "border-green-950"
    
    # Test all 22 color families
    assert str(border_color.orange._500) == "border-orange-500"
    assert str(border_color.amber._500) == "border-amber-500"
    assert str(border_color.yellow._500) == "border-yellow-500"
    assert str(border_color.lime._500) == "border-lime-500"
    assert str(border_color.emerald._500) == "border-emerald-500"
    assert str(border_color.teal._500) == "border-teal-500"
    assert str(border_color.cyan._500) == "border-cyan-500"
    assert str(border_color.sky._500) == "border-sky-500"
    assert str(border_color.indigo._500) == "border-indigo-500"
    assert str(border_color.violet._500) == "border-violet-500"
    assert str(border_color.purple._500) == "border-purple-500"
    assert str(border_color.fuchsia._500) == "border-fuchsia-500"
    assert str(border_color.pink._500) == "border-pink-500"
    assert str(border_color.rose._500) == "border-rose-500"
    assert str(border_color.slate._500) == "border-slate-500"
    assert str(border_color.gray._500) == "border-gray-500"
    assert str(border_color.zinc._500) == "border-zinc-500"
    assert str(border_color.neutral._500) == "border-neutral-500"
    assert str(border_color.stone._500) == "border-stone-500"
    
    # Test special colors
    assert str(border_color.inherit) == "border-inherit"
    assert str(border_color.current) == "border-current"
    assert str(border_color.transparent) == "border-transparent"
    assert str(border_color.black) == "border-black"
    assert str(border_color.white) == "border-white"
    
    # Test with opacity
    assert str(border_color.red._500.opacity(50)) == "border-red-500/50"
    assert str(border_color.blue._300.opacity(75)) == "border-blue-300/75"
    assert str(border_color.black.opacity(10)) == "border-black/10"
    
    # Test directional variants
    assert str(border_color.t.red._500) == "border-t-red-500"
    assert str(border_color.r.blue._300) == "border-r-blue-300"
    assert str(border_color.b.green._600) == "border-b-green-600"
    assert str(border_color.l.purple._400) == "border-l-purple-400"
    
    # Test logical directional variants
    assert str(border_color.x.gray._200) == "border-x-gray-200"
    assert str(border_color.y.zinc._700) == "border-y-zinc-700"
    assert str(border_color.s.indigo._500) == "border-s-indigo-500"
    assert str(border_color.e.rose._300) == "border-e-rose-300"
    
    # Test directional with special colors
    assert str(border_color.t.transparent) == "border-t-transparent"
    assert str(border_color.x.black) == "border-x-black"
    assert str(border_color.y.current) == "border-y-current"
    
    # Test with function call
    assert str(border_color("red-500")) == "border-red-500"
    assert str(border_color("blue-300", opacity=50)) == "border-blue-300/50"
    
    # Test arbitrary values
    assert str(border_color("#ff0000")) == "border-[#ff0000]"
    assert str(border_color("rgb(255, 0, 0)")) == "border-[rgb(255, 0, 0)]"
    assert str(border_color.t("#00ff00")) == "border-t-[#00ff00]"
    
    # Test custom properties
    assert str(border_color("--custom-border")) == "border-(--custom-border)"
    assert str(border_color.x("--theme-border")) == "border-x-(--theme-border)"

# Run the tests
test_borders_color_examples()

Divide Color

Control the color of borders between child elements using the divide color utilities:

Divide Color Factory

# Create the divide color factory using ColoredFactory
divide_color = ColoredFactory("divide", "Divide color utilities for controlling the color of borders between child elements")

Test Divide Color Utilities

---

test_borders_divide_color_examples

def test_borders_divide_color_examples(
    
):

Test divide color utilities for borders between children.

def test_borders_divide_color_examples():
    """Test divide color utilities for borders between children."""
    # Test basic colors
    assert str(divide_color.red._500) == "divide-red-500"
    assert str(divide_color.blue._300) == "divide-blue-300"
    assert str(divide_color.green._950) == "divide-green-950"
    
    # Test all 22 color families
    assert str(divide_color.orange._500) == "divide-orange-500"
    assert str(divide_color.amber._500) == "divide-amber-500"
    assert str(divide_color.yellow._500) == "divide-yellow-500"
    assert str(divide_color.lime._500) == "divide-lime-500"
    assert str(divide_color.emerald._500) == "divide-emerald-500"
    assert str(divide_color.teal._500) == "divide-teal-500"
    assert str(divide_color.cyan._500) == "divide-cyan-500"
    assert str(divide_color.sky._500) == "divide-sky-500"
    assert str(divide_color.indigo._500) == "divide-indigo-500"
    assert str(divide_color.violet._500) == "divide-violet-500"
    assert str(divide_color.purple._500) == "divide-purple-500"
    assert str(divide_color.fuchsia._500) == "divide-fuchsia-500"
    assert str(divide_color.pink._500) == "divide-pink-500"
    assert str(divide_color.rose._500) == "divide-rose-500"
    assert str(divide_color.slate._500) == "divide-slate-500"
    assert str(divide_color.gray._500) == "divide-gray-500"
    assert str(divide_color.zinc._500) == "divide-zinc-500"
    assert str(divide_color.neutral._500) == "divide-neutral-500"
    assert str(divide_color.stone._500) == "divide-stone-500"
    
    # Test special colors
    assert str(divide_color.inherit) == "divide-inherit"
    assert str(divide_color.current) == "divide-current"
    assert str(divide_color.transparent) == "divide-transparent"
    assert str(divide_color.black) == "divide-black"
    assert str(divide_color.white) == "divide-white"
    
    # Test with opacity
    assert str(divide_color.red._500.opacity(50)) == "divide-red-500/50"
    assert str(divide_color.blue._300.opacity(75)) == "divide-blue-300/75"
    assert str(divide_color.black.opacity(10)) == "divide-black/10"
    
    # Test with function call
    assert str(divide_color("red-500")) == "divide-red-500"
    assert str(divide_color("blue-300", opacity=50)) == "divide-blue-300/50"
    
    # Test arbitrary values
    assert str(divide_color("#ff0000")) == "divide-[#ff0000]"
    assert str(divide_color("rgb(255, 0, 0)")) == "divide-[rgb(255, 0, 0)]"
    
    # Test custom properties
    assert str(divide_color("--custom-divide")) == "divide-(--custom-divide)"
    assert str(divide_color("--theme-divide")) == "divide-(--theme-divide)"

# Run the tests
test_borders_divide_color_examples()

Border Style

Control the style of element borders using the border style utilities:

Border Style Factory

# Create border style factory
border_style = SimpleFactory(
    {
        "solid": "border-solid",
        "dashed": "border-dashed", 
        "dotted": "border-dotted",
        "double": "border-double",
        "hidden": "border-hidden",
        "none": "border-none"
    },
    "Border style utilities for controlling the style of element borders"
) # Border style factory

Test Border Style Utilities

---

test_borders_style_examples

def test_borders_style_examples(
    
):

Test border style utilities.

def test_borders_style_examples():
    """Test border style utilities."""
    assert str(border_style.solid) == "border-solid"
    assert str(border_style.dashed) == "border-dashed"
    assert str(border_style.dotted) == "border-dotted"
    assert str(border_style.double) == "border-double"
    assert str(border_style.hidden) == "border-hidden"
    assert str(border_style.none) == "border-none"

# Run the tests
test_borders_style_examples()

Divide Style

Control the style of borders between child elements using the divide style utilities:

Divide Style Factory

# Create divide style factory
divide_style = SimpleFactory(
    {
        "solid": "divide-solid",
        "dashed": "divide-dashed",
        "dotted": "divide-dotted",
        "double": "divide-double",
        "hidden": "divide-hidden",
        "none": "divide-none"
    },
    "Divide style utilities for controlling the style of borders between child elements"
) # Divide style factory

Test Divide Style Utilities

---

test_borders_divide_style_examples

def test_borders_divide_style_examples(
    
):

Test divide style utilities.

def test_borders_divide_style_examples():
    """Test divide style utilities."""
    assert str(divide_style.solid) == "divide-solid"
    assert str(divide_style.dashed) == "divide-dashed"
    assert str(divide_style.dotted) == "divide-dotted"
    assert str(divide_style.double) == "divide-double"
    assert str(divide_style.hidden) == "divide-hidden"
    assert str(divide_style.none) == "divide-none"

# Run the tests
test_borders_divide_style_examples()

Outline Width

Control the width of element outlines using the outline utilities:

Outline Width Configuration

Outline Width Factory

---

OutlineWidthFactory

def OutlineWidthFactory(
    doc:Optional=None, # Optional documentation string
):

Factory for creating outline width utilities.

# Create the main outline width factory
outline = OutlineWidthFactory("Outline width utilities for controlling the width of element outlines")

Test Outline Width Utilities

---

test_borders_outline_width_examples

def test_borders_outline_width_examples(
    
):

Test outline width utilities.

def test_borders_outline_width_examples():
    """Test outline width utilities."""
    # Test default outline (1px)
    assert str(outline()) == "outline"
    
    # Test numeric values
    assert str(outline._0) == "outline-0"
    assert str(outline._1) == "outline-1"
    assert str(outline._2) == "outline-2"
    assert str(outline._4) == "outline-4"
    assert str(outline._8) == "outline-8"
    
    # Test with function call
    assert str(outline(0)) == "outline-0"
    assert str(outline(2)) == "outline-2"
    assert str(outline(4)) == "outline-4"
    
    # Test arbitrary values
    assert str(outline("3px")) == "outline-[3px]"
    assert str(outline("0.5rem")) == "outline-[0.5rem]"
    # assert str(outline("thin")) == "outline-[thin]"
    
    # Test custom properties
    assert str(outline("--outline-width")) == "outline-(--outline-width)"

# Run the tests
test_borders_outline_width_examples()

Outline Color

Control the color of element outlines using the outline color utilities:

Outline Color Factory

# Create the outline color factory using ColoredFactory
outline_color = ColoredFactory("outline", "Outline color utilities for controlling the color of element outlines")

Test Outline Color Utilities

---

test_borders_outline_color_examples

def test_borders_outline_color_examples(
    
):

Test outline color utilities.

def test_borders_outline_color_examples():
    """Test outline color utilities."""
    # Test basic colors
    assert str(outline_color.red._500) == "outline-red-500"
    assert str(outline_color.blue._300) == "outline-blue-300"
    assert str(outline_color.green._950) == "outline-green-950"
    
    # Test all 22 color families
    assert str(outline_color.orange._500) == "outline-orange-500"
    assert str(outline_color.amber._500) == "outline-amber-500"
    assert str(outline_color.yellow._500) == "outline-yellow-500"
    assert str(outline_color.lime._500) == "outline-lime-500"
    assert str(outline_color.emerald._500) == "outline-emerald-500"
    assert str(outline_color.teal._500) == "outline-teal-500"
    assert str(outline_color.cyan._500) == "outline-cyan-500"
    assert str(outline_color.sky._500) == "outline-sky-500"
    assert str(outline_color.indigo._500) == "outline-indigo-500"
    assert str(outline_color.violet._500) == "outline-violet-500"
    assert str(outline_color.purple._500) == "outline-purple-500"
    assert str(outline_color.fuchsia._500) == "outline-fuchsia-500"
    assert str(outline_color.pink._500) == "outline-pink-500"
    assert str(outline_color.rose._500) == "outline-rose-500"
    assert str(outline_color.slate._500) == "outline-slate-500"
    assert str(outline_color.gray._500) == "outline-gray-500"
    assert str(outline_color.zinc._500) == "outline-zinc-500"
    assert str(outline_color.neutral._500) == "outline-neutral-500"
    assert str(outline_color.stone._500) == "outline-stone-500"
    
    # Test special colors
    assert str(outline_color.inherit) == "outline-inherit"
    assert str(outline_color.current) == "outline-current"
    assert str(outline_color.transparent) == "outline-transparent"
    assert str(outline_color.black) == "outline-black"
    assert str(outline_color.white) == "outline-white"
    
    # Test with opacity
    assert str(outline_color.red._500.opacity(50)) == "outline-red-500/50"
    assert str(outline_color.blue._300.opacity(75)) == "outline-blue-300/75"
    assert str(outline_color.black.opacity(10)) == "outline-black/10"
    
    # Test with function call
    assert str(outline_color("red-500")) == "outline-red-500"
    assert str(outline_color("blue-300", opacity=50)) == "outline-blue-300/50"
    
    # Test arbitrary values
    assert str(outline_color("#ff0000")) == "outline-[#ff0000]"
    assert str(outline_color("rgb(255, 0, 0)")) == "outline-[rgb(255, 0, 0)]"
    
    # Test custom properties
    assert str(outline_color("--custom-outline")) == "outline-(--custom-outline)"

# Run the tests
test_borders_outline_color_examples()

Outline Style

Control the style of element outlines using the outline style utilities:

Outline Style Factory

# Create outline style factory with special handling for outline-hidden
outline_style = SimpleFactory(
    {
        "solid": "outline-solid",
        "dashed": "outline-dashed",
        "dotted": "outline-dotted",
        "double": "outline-double",
        "none": "outline-none"
    },
    "Outline style utilities for controlling the style of element outlines"
) # Outline style factory

# Add outline-hidden as a special single value factory
outline_hidden = SingleValueFactory(
    "outline-hidden", 
    "Outline hidden utility that creates a transparent outline with offset"
) # Special outline-hidden utility

Test Outline Style Utilities

---

test_borders_outline_style_examples

def test_borders_outline_style_examples(
    
):

Test outline style utilities.

def test_borders_outline_style_examples():
    """Test outline style utilities."""
    assert str(outline_style.solid) == "outline-solid"
    assert str(outline_style.dashed) == "outline-dashed"
    assert str(outline_style.dotted) == "outline-dotted"
    assert str(outline_style.double) == "outline-double"
    assert str(outline_style.none) == "outline-none"
    
    # Test special outline-hidden utility
    assert str(outline_hidden) == "outline-hidden"

# Run the tests
test_borders_outline_style_examples()

Outline Offset

Control the offset of element outlines using the outline offset utilities:

Outline Offset Configuration

Outline Offset Factory

# Create the outline offset factory
outline_offset = ScaledFactory(
    "outline-offset", 
    OUTLINE_OFFSET_CONFIG, 
    "Outline offset utilities for controlling the offset of element outlines"
)

Test Outline Offset Utilities

---

test_borders_outline_offset_examples

def test_borders_outline_offset_examples(
    
):

Test outline offset utilities.

def test_borders_outline_offset_examples():
    """Test outline offset utilities."""
    # Test numeric values
    assert str(outline_offset._0) == "outline-offset-0"
    assert str(outline_offset._1) == "outline-offset-1"
    assert str(outline_offset._2) == "outline-offset-2"
    assert str(outline_offset._4) == "outline-offset-4"
    assert str(outline_offset._8) == "outline-offset-8"
    
    # Test with function call
    assert str(outline_offset(0)) == "outline-offset-0"
    assert str(outline_offset(2)) == "outline-offset-2"
    assert str(outline_offset(4)) == "outline-offset-4"
    
    # Test negative values
    assert str(outline_offset.negative(1)) == "-outline-offset-1"
    assert str(outline_offset.negative(2)) == "-outline-offset-2"
    assert str(outline_offset.negative(4)) == "-outline-offset-4"
    assert str(outline_offset.negative(8)) == "-outline-offset-8"
    
    # Test negative with function call
    assert str(outline_offset(1, negative=True)) == "-outline-offset-1"
    assert str(outline_offset(2, negative=True)) == "-outline-offset-2"
    
    # Test arbitrary values
    assert str(outline_offset("3px")) == "outline-offset-[3px]"
    assert str(outline_offset("0.5rem")) == "outline-offset-[0.5rem]"
    
    # Test custom properties
    assert str(outline_offset("--outline-offset")) == "outline-offset-(--outline-offset)"

# Run the tests
test_borders_outline_offset_examples()

Practical Examples

Let’s see how to use these border utilities in real FastHTML components:

---

test_borders_fasthtml_examples

def test_borders_fasthtml_examples(
    
):

Test border utilities in practical FastHTML component examples.

def test_borders_fasthtml_examples():
    """Test border utilities in practical FastHTML component examples."""
    from fasthtml.common import Div, Button, Ul, Li, H3, P, Input, Link
    from cjm_fasthtml_tailwind.utilities.spacing import p
    from cjm_fasthtml_tailwind.utilities.layout import display_tw, overflow
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import gap, flex_display, grid_display
    from cjm_fasthtml_tailwind.core.base import combine_classes
    
    # Card with rounded corners and colored border
    card = Div(
        H3("Card Title"),
        P("Card content goes here."),
        cls=combine_classes(
            rounded.lg,
            border(),
            border_color.gray._300,
            p(6)
        )
    )
    assert "rounded-lg" in card.attrs['class']
    assert "border" in card.attrs['class']
    assert "border-gray-300" in card.attrs['class']
    
    # Button with full rounded corners and colored border
    button = Button(
        "Click me",
        cls=combine_classes(
            rounded.full,
            border._2,
            border_color.blue._500,
            p.x(4),
            p.y(2)
        )
    )
    assert "rounded-full" in button.attrs['class']
    assert "border-2" in button.attrs['class']
    assert "border-blue-500" in button.attrs['class']
    
    # Container with top rounded corners and different border colors
    container = Div(
        "Content",
        cls=combine_classes(
            rounded.t.xl,
            rounded.b.none,
            border(),
            border_color.t.red._500,
            border_color.x.gray._300,
            border_color.b.transparent,
            p(4)
        )
    )
    assert "rounded-t-xl" in container.attrs['class']
    assert "rounded-b-none" in container.attrs['class']
    assert "border-t-red-500" in container.attrs['class']
    assert "border-x-gray-300" in container.attrs['class']
    assert "border-b-transparent" in container.attrs['class']
    
    # List with colored dividers between items
    list_with_dividers = Ul(
        Li("Item 1"),
        Li("Item 2"),
        Li("Item 3"),
        cls=combine_classes(
            divide.y._2,
            divide_color.gray._200,
            p.y(2)
        )
    )
    assert "divide-y-2" in list_with_dividers.attrs['class']
    assert "divide-gray-200" in list_with_dividers.attrs['class']
    
    # Horizontal button group with colored dividers
    button_group = Div(
        Button("Left"),
        Button("Center"),
        Button("Right"),
        cls=combine_classes(
            flex_display,
            divide.x(),
            divide_color.gray._400,
            border(),
            border_color.gray._400,
            rounded.lg,
            overflow.hidden
        )
    )
    assert "divide-x" in button_group.attrs['class']
    assert "divide-gray-400" in button_group.attrs['class']
    assert "border" in button_group.attrs['class']
    assert "border-gray-400" in button_group.attrs['class']
    assert "rounded-lg" in button_group.attrs['class']
    
    # Complex border example with colors
    complex_border = Div(
        "Complex borders",
        cls=combine_classes(
            border.t._4,
            border.r._2,
            border.b._0,
            border.l._2,
            border_color.t.red._600,
            border_color.r.blue._400,
            border_color.l.green._500,
            rounded.tl.xl,
            rounded.tr.sm,
            rounded.br.none,
            rounded.bl.md,
            p(4)
        )
    )
    assert "border-t-4" in complex_border.attrs['class']
    assert "border-r-2" in complex_border.attrs['class']
    assert "border-b-0" in complex_border.attrs['class']
    assert "border-l-2" in complex_border.attrs['class']
    assert "border-t-red-600" in complex_border.attrs['class']
    assert "border-r-blue-400" in complex_border.attrs['class']
    assert "border-l-green-500" in complex_border.attrs['class']
    assert "rounded-tl-xl" in complex_border.attrs['class']
    assert "rounded-tr-sm" in complex_border.attrs['class']
    assert "rounded-br-none" in complex_border.attrs['class']
    assert "rounded-bl-md" in complex_border.attrs['class']
    
    # Card with semi-transparent border
    transparent_card = Div(
        "Semi-transparent border",
        cls=combine_classes(
            border._2,
            border_color.black.opacity(20),
            rounded.md,
            p(4)
        )
    )
    assert "border-2" in transparent_card.attrs['class']
    assert "border-black/20" in transparent_card.attrs['class']
    assert "rounded-md" in transparent_card.attrs['class']
    
    # Input with dashed border style
    input_field = Input(
        type="text",
        placeholder="Enter text",
        cls=combine_classes(
            border._2,
            border_color.gray._400,
            border_style.dashed,
            rounded.md,
            p.x(3),
            p.y(2)
        )
    )
    assert "border-2" in input_field.attrs['class']
    assert "border-gray-400" in input_field.attrs['class']
    assert "border-dashed" in input_field.attrs['class']
    
    # List with dotted dividers
    dotted_list = Ul(
        Li("First item"),
        Li("Second item"),
        Li("Third item"),
        cls=combine_classes(
            divide.y(),
            divide_color.gray._300,
            divide_style.dotted,
            p.y(1)
        )
    )
    assert "divide-y" in dotted_list.attrs['class']
    assert "divide-gray-300" in dotted_list.attrs['class']
    assert "divide-dotted" in dotted_list.attrs['class']
    
    # Button with focus outline
    focus_button = Button(
        "Focus Me",
        cls=combine_classes(
            p.x(4),
            p.y(2),
            outline_style.none,
            outline._2.focus,
            outline_color.blue._500.focus,
            outline_offset._2.focus
        )
    )
    assert "outline-none" in focus_button.attrs['class']
    assert "focus:outline-2" in focus_button.attrs['class']
    assert "focus:outline-blue-500" in focus_button.attrs['class']
    assert "focus:outline-offset-2" in focus_button.attrs['class']
    
    # Link with custom outline
    custom_link = Link(
        "Custom Link",
        href="#",
        cls=combine_classes(
            display_tw.inline_block,
            p.x(3),
            p.y(1),
            outline(),
            outline_color.purple._400,
            outline_style.dashed,
            outline_offset._1,
            rounded.sm
        )
    )
    assert "outline" in custom_link.attrs['class']
    assert "outline-purple-400" in custom_link.attrs['class']
    assert "outline-dashed" in custom_link.attrs['class']
    assert "outline-offset-1" in custom_link.attrs['class']
    
    # Box with double border style
    double_border_box = Div(
        "Double Border",
        cls=combine_classes(
            border._4,
            border_color.indigo._600,
            border_style.double,
            rounded.lg,
            p(6)
        )
    )
    assert "border-4" in double_border_box.attrs['class']
    assert "border-indigo-600" in double_border_box.attrs['class']
    assert "border-double" in double_border_box.attrs['class']
    
    # Container with hidden outline for accessibility
    accessible_container = Div(
        "Accessible content",
        tabindex="0",
        cls=combine_classes(
            outline_hidden,
            outline._2.focus,
            outline_color.blue._500.focus,
            p(4)
        )
    )
    assert "outline-hidden" in accessible_container.attrs['class']
    
    # Return all examples in a grid layout
    return Div(
        card,
        button,
        container,
        list_with_dividers,
        button_group,
        complex_border,
        transparent_card,
        input_field,
        dotted_list,
        focus_button,
        custom_link,
        double_border_box,
        accessible_container,
        cls=combine_classes(grid_display, gap(5))
    )

# Run the tests
test_borders_fasthtml_examples()

Card Title

Card content goes here.

Content

• Item 1
• Item 2
• Item 3

Complex borders

Semi-transparent border

• First item
• Second item
• Third item

Custom Link

Double Border

Accessible content

test_func = test_borders_fasthtml_examples
app, rt = create_test_app()

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()