Border Style

    Use to control an element’s border style.

    To control the border style of an element at a specific breakpoint, add a {screen}: prefix to any existing border style utility. For example, use md:border-dotted to apply the utility at only medium screen sizes and above.

    For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

    Border Style - 图2

    sm

    Border Style - 图4

    md

    Border Style - 图6

    xl

    By default, only responsive variants are generated for border style utilities.

    You can control which variants are generated for the border style utilities by modifying the borderStyle property in the variants section of your file.

    For example, this config will also generate hover and focus variants:

    Disabling

    ← Border Opacity