Border Radius Utilities

daisyUI provides additional tokenized border radius values that can be customized based on the theme:

---

source

test_border_radius_basic_examples

 test_border_radius_basic_examples ()

Test daisyUI’s tokenized border radius utilities.

# Border radius utilities
BORDER_RADIUS_VALUES = {
    "box": "rounded-box",          # For large sized components like card, modal, alert, etc.
    "field": "rounded-field",      # For medium sized components like button, input, select, tab, etc.
    "selector": "rounded-selector" # For small sized components like checkbox, toggle, badge, etc.
}

border_radius = SimpleFactory(BORDER_RADIUS_VALUES, "Tokenized border radius values that can be customized based on theme.") # The daisyUI border radius factory

def test_border_radius_basic_examples():
    """Test daisyUI's tokenized border radius utilities."""
    # Test basic usage
    assert str(border_radius.box) == "rounded-box"
    assert str(border_radius.field) == "rounded-field"
    assert str(border_radius.selector) == "rounded-selector"
    
    # Test with modifiers
    assert str(border_radius.box.hover) == "hover:rounded-box"
    assert str(border_radius.field.md) == "md:rounded-field"
    assert str(border_radius.selector.dark) == "dark:rounded-selector"
    
    # Test chained modifiers
    assert str(border_radius.box.hover.lg) == "lg:hover:rounded-box"
    assert str(border_radius.field.dark.md) == "md:dark:rounded-field"

# Run the test
test_border_radius_basic_examples()

Practical Examples

Test with FastHTML components to show practical usage:

---

source

test_border_radius_fasthtml_examples

 test_border_radius_fasthtml_examples ()

Test practical usage patterns with FastHTML components.

def test_border_radius_fasthtml_examples():
    """Test practical usage patterns with FastHTML components."""
    from fasthtml.common import Div, Button, H1, P, Span
    from cjm_fasthtml_tailwind.core.base import combine_classes
    from cjm_fasthtml_tailwind.utilities.borders import border
    from cjm_fasthtml_tailwind.utilities.effects import shadow
    from cjm_fasthtml_tailwind.utilities.spacing import p
    from cjm_fasthtml_tailwind.utilities.backgrounds import bg_linear
    from cjm_fasthtml_daisyui.components.actions.button import btn
    from cjm_fasthtml_daisyui.components.data_display.card import card
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, border_dui, text_dui
    
    # Create a card with semantic colors and tokenized border radius
    card = Div(
        H1("Welcome to daisyUI", cls=str(text_dui.primary)),
        P("This card uses semantic colors", cls=str(text_dui.base_content)),
        cls=combine_classes(
            card,
            bg_dui.base_100,
            border_dui.base_300,
            border_radius.box,
            p(6), border(), shadow.lg
        )
    )
    
    # Verify classes
    assert "bg-base-100" in card.attrs['class']
    assert "border-base-300" in card.attrs['class']
    assert "rounded-box" in card.attrs['class']
    assert card.children[0].attrs['class'] == "text-primary"

    return Div(
        card
    )

# Run the test
test_border_radius_fasthtml_examples()

<div>
  <div class="card bg-base-100 border-base-300 rounded-box p-6 border shadow-lg">
    <h1 class="text-primary">Welcome to daisyUI</h1>
    <p class="text-base-content">This card uses semantic colors</p>
  </div>
</div>

test_func = test_border_radius_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

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