Meta tags:
description= Utilities for controlling the color of an element s borders.;
Headings (most frequently used words):
tailwind, sides, using, on, css, resources, plus, community, border, color, examples, customizing, your, theme, getting, started, core, concepts, base, styles, layout, flexbox, grid, spacing, sizing, typography, backgrounds, borders, effects, filters, tables, transitions, animation, transforms, interactivity, svg, accessibility, basic, example, changing, the, opacity, individual, horizontal, and, vertical, logical, properties, divider, between, children, custom, value, applying, focus, responsive, design, this, page,
Text of the page (most frequently used words):
color (7002), #border (6832), var (3470), oklch (3432), block (884), inline (884), 500 (659), 200 (642), 100 (631), 600 (625), 700 (625), 950 (624), 900 (624), 800 (624), 400 (624), 300 (624), end (588), start (588), indigo (298), divide (297), right (297), left (297), top (295), bottom (295), child (294), not (293), last (293), lime (269), blue (268), sky (266), purple (266), green (265), pink (265), gray (265), rose (265), taupe (264), mist (264), olive (264), mauve (264), stone (264), neutral (264), zinc (264), slate (264), fuchsia (264), violet (264), cyan (264), teal (264), emerald (264), yellow (264), amber (264), orange (264), red (264), 106 (84), 325 (84), 293 (84), 014 (72), 005 (72), 006 (72), 107 (72), 013 (72), 286 (72), 264 (72), 016 (60), 007 (60), 002 (60), 003 (60), 322 (60), 285 (60), 265 (60), div (50), 004 (48), 011 (48), 017 (48), 021 (48), 223 (48), 216 (48), 213 (48), 214 (48), 323 (48), 321 (48), 034 (48), 259 (48), 717 (48), 001 (48), 188 (48), 277 (48), 128 (48), 163 (48), 015 (36), 031 (36), 019 (36), 029 (36), 071 (36), 033 (36), 256 (36), 022 (36), 247 (36), 042 (36), 257 (36), 281 (36), 105 (36), 272 (36), 697 (36), 935 (36), 058 (36), 018 (36), 318 (36), 149 (36), 063 (36), 292 (36), 111 (36), 182 (36), 254 (36), 157 (36), 154 (36), 152 (36), 180 (36), 051 (36), 095 (36), 164 (36), 131 (36), custom (30), the (29), value (28), property (27), white (25), 009 (24), 008 (24), 219 (24), 197 (24), 023 (24), 320 (24), 043 (24), 366 (24), 067 (24), 028 (24), 261 (24), 665 (24), 258 (24), 695 (24), 041 (24), 044 (24), 046 (24), 788 (24), 255 (24), 896 (24), 222 (24), 253 (24), 585 (24), 194 (24), 117 (24), 638 (24), 109 (24), 907 (24), 815 (24), 241 (24), 308 (24), 343 (24), 661 (24), 612 (24), 211 (24), 238 (24), 145 (24), 076 (24), 302 (24), 304 (24), 303 (24), 288 (24), 203 (24), 119 (24), 306 (24), 141 (24), 189 (24), 232 (24), 183 (24), 571 (24), 283 (24), 195 (24), 262 (24), 276 (24), 966 (24), 233 (24), 274 (24), 065 (24), 199 (24), 243 (24), 245 (24), 165 (24), 813 (24), 059 (24), 032 (24), 604 (24), 066 (24), 240 (24), 169 (24), 237 (24), 230 (24), 026 (24), 236 (24), 126 (24), 221 (24), 723 (24), 143 (24), 127 (24), 078 (24), 096 (24), 118 (24), 184 (24), 181 (24), 172 (24), 077 (24), 166 (24), 162 (24), 177 (24), 934 (24), 151 (24), 328 (24), 155 (24), 101 (24), 124 (24), 130 (24), 684 (24), 114 (24), black (24), transparent (24), inherit (24), class (22), and (13), text (12), 228 (12), 025 (12), 326 (12), 024 (12), 012 (12), 298 (12), 558 (12), 639 (12), 424 (12), 423 (12), 823 (12), 885 (12), 805 (12), 786 (12), 938 (12), 375 (12), 692 (12), 848 (12), 733 (12), 802 (12), 027 (12), 364 (12), 338 (12), 531 (12), 542 (12), 839 (12), 755 (12), 260 (12), 287 (12), 417 (12), 252 (12), 894 (12), 508 (12), 858 (12), 094 (12), 159 (12), 246 (12), 439 (12), 428 (12), 422 (12), 153 (12), 432 (12), 187 (12), 958 (12), 249 (12), 584 (12), 354 (12), 202 (12), 349 (12), 761 (12), 346 (12), 061 (12), 231 (12), 342 (12), 198 (12), 136 (12), 324 (12), 591 (12), 949 (12), 295 (12), 434 (12), 319 (12), 037 (12), 852 (12), 176 (12), 987 (12), 218 (12), 724 (12), 301 (12), 924 (12), 305 (12), 504 (12), 383 (12), 703 (12), 307 (12), 174 (12), 299 (12), 291 (12), 089 (12), 745 (12), 759 (12), 581 (12), 541 (12), 057 (12), 294 (12), 588 (12), 756 (12), 144 (12), 278 (12), 115 (12), 713 (12), 039 (12), 314 (12), 091 (12), 267 (12), 146 (12), 522 (12), 376 (12), 881 (12), 624 (12), 251 (12), 876 (12), 134 (12), 242 (12), 749 (12), 158 (12), 902 (12), 824 (12), 056 (12), 229 (12), 227 (12), 392 (12), 085 (12), 224 (12), 215 (12), 207 (12), 205 (12), 045 (12), 388 (12), 873 (12), 192 (12), 524 (12), 416 (12), 186 (12), 391 (12), 704 (12), 503 (12), 912 (12), 138 (12), 426 (12), 801 (12), 552 (12), 168 (12), 913 (12), 225 (12), 978 (12), 093 (12), 052 (12), 113 (12), 535 (12), 150 (12), 069 (12), 579 (12), 209 (12), 711 (12), 449 (12), 084 (12), 995 (12), 156 (12), 743 (12), 826 (12), 072 (12), 132 (12), 933 (12), 589 (12), 196 (12), 122 (12), 120 (12), 757 (12), 708 (12), 135 (12), 442 (12), 834 (12), 047 (12), 936 (12), 129 (12), 103 (12), 193 (12), 102 (12), 212 (12), 635 (12), 112 (12), 904 (12), 137 (12), 201 (12), 998 (12), 179 (12), 429 (12), 605 (12), 746 (12), 617 (12), 079 (12), 123 (12), 402 (12), 116 (12), 038 (12), 092 (12), 899 (12), 518 (12), 331 (12), 191 (12), 062 (12), 334 (12), fff (12), 000 (12), currentcolor (12), current (12), use (10), grid (10), size (10), style (9), mask (9), background (9), width (8), utilities (8), font (8), theme (7), like (7), tailwind (6), documentation (6), using (6), opacity (6), utility (6), scroll (6), align (6), flex (6), your (5), focus (5), sides (5), for (5), set (5), mode (5), element (5), borders (5), transition (5), position (5), break (5), decoration (5), css (4), logical (4), properties (4), more (4), variants (4), transform (4), origin (4), outline (4), content (4), height (4), max (4), min (4), community (3), kit (3), templates (3), plus (3), showcase (3), blog (3), playground (3), customizing (3), responsive (3), design (3), between (3), vertical (3), learn (3), about (3), regal (3), variables (3), with (3), variant (3), based (3), control (3), styles (3), snap (3), type (3), scrollbar (3), behavior (3), sizing (3), rotate (3), spacing (3), shadow (3), image (3), box (3), overflow (3), wrap (3), line (3), list (3), place (3), self (3), items (3), justify (3), auto (3), columns (3), discord (2), github (2), hero (2), patterns (2), heroicons (2), headless (2), refactoring (2), resources (2), blocks (2), sponsor (2), applying (2), divider (2), children (2), horizontal (2), individual (2), changing (2), basic (2), example (2), examples (2), this (2), can (2), 243c5a (2), prefix (2), only (2), apply (2), that (2), function (2), you (2), syntax (2), which (2), map (2), either (2), dir (2), direction (2), side (2), stroke (2), padding (2), margin (2), perspective (2), visibility (2), animation (2), layout (2), sepia (2), saturate (2), invert (2), hue (2), grayscale (2), contrast (2), brightness (2), blur (2), filter (2), repeat (2), clip (2), blend (2), offset (2), rows (2), template (2), object (2), classes (2), trademark, policy, copyright, 2026, labs, inc, quick, reference, page, now, used, markup, customize, project, breakpoint, medium, screen, sizes, above, input, email, address, state, just, shorthand, adds, automatically, also, completely, cols, elements, writing, rtl, ltr, two, same, time, one, modifier, show, controlling, forced, adjust, accessibility, fill, svg, will, change, user, select, touch, action, stop, gutter, resize, pointer, events, field, cursor, scheme, caret, appearance, accent, interactivity, zoom, translate, skew, scale, backface, transforms, delay, timing, duration, transitions, caption, table, collapse, tables, backdrop, drop, filters, composite, mix, effects, radius, attachment, backgrounds, hyphens, word, space, tab, indent, underline, thickness, clamp, letter, feature, settings, numeric, stretch, weight, smoothing, family, typography, gap, flow, row, column, order, shrink, grow, basis, flexbox, index, overscroll, fit, isolation, clear, float, display, inside, before, after, aspect, ratio, preflight, base, functions, directives, detecting, source, files, adding, colors, dark, hover, other, states, styling, core, concepts, upgrade, guide, compatibility, editor, setup, installation, getting, started, new, course, components, partners, docs, ctrl,
Text of the page (random words):
ot last child border color var color purple 600 oklch 55 8 0 288 302 321 divide purple 700 not last child border color var color purple 700 oklch 49 6 0 265 301 924 divide purple 800 not last child border color var color purple 800 oklch 43 8 0 218 303 724 divide purple 900 not last child border color var color purple 900 oklch 38 1 0 176 304 987 divide purple 950 not last child border color var color purple 950 oklch 29 1 0 149 302 717 divide fuchsia 50 not last child border color var color fuchsia 50 oklch 97 7 0 017 320 058 divide fuchsia 100 not last child border color var color fuchsia 100 oklch 95 2 0 037 318 852 divide fuchsia 200 not last child border color var color fuchsia 200 oklch 90 3 0 076 319 62 divide fuchsia 300 not last child border color var color fuchsia 300 oklch 83 3 0 145 321 434 divide fuchsia 400 not last child border color var color fuchsia 400 oklch 74 0 238 322 16 divide fuchsia 500 not last child border color var color fuchsia 500 oklch 66 7 0 295 322 15 divide fuchsia 600 not last child border color var color fuchsia 600 oklch 59 1 0 293 322 896 divide fuchsia 700 not last child border color var color fuchsia 700 oklch 51 8 0 253 323 949 divide fuchsia 800 not last child border color var color fuchsia 800 oklch 45 2 0 211 324 591 divide fuchsia 900 not last child border color var color fuchsia 900 oklch 40 1 0 17 325 612 divide fuchsia 950 not last child border color var color fuchsia 950 oklch 29 3 0 136 325 661 divide pink 50 not last child border color var color pink 50 oklch 97 1 0 014 343 198 divide pink 100 not last child border color var color pink 100 oklch 94 8 0 028 342 258 divide pink 200 not last child border color var color pink 200 oklch 89 9 0 061 343 231 divide pink 300 not last child border color var color pink 300 oklch 82 3 0 12 346 018 divide pink 400 not last child border color var color pink 400 oklch 71 8 0 202 349 761 divide pink 500 not last child border color var color pink 500 oklch 65 6 0 241 354 308 divide pink 600 not last child border color var color pink 600 oklch 59 2 0 249 0 584 divide pink 700 not last child border color var color pink 700 oklch 52 5 0 223 3 958 divide pink 800 not last child border color var color pink 800 oklch 45 9 0 187 3 815 divide pink 900 not last child border color var color pink 900 oklch 40 8 0 153 2 432 divide pink 950 not last child border color var color pink 950 oklch 28 4 0 109 3 907 divide rose 50 not last child border color var color rose 50 oklch 96 9 0 015 12 422 divide rose 100 not last child border color var color rose 100 oklch 94 1 0 03 12 58 divide rose 200 not last child border color var color rose 200 oklch 89 2 0 058 10 001 divide rose 300 not last child border color var color rose 300 oklch 81 0 117 11 638 divide rose 400 not last child border color var color rose 400 oklch 71 2 0 194 13 428 divide rose 500 not last child border color var color rose 500 oklch 64 5 0 246 16 439 divide rose 600 not last child border color var color rose 600 oklch 58 6 0 253 17 585 divide rose 700 not last child border color var color rose 700 oklch 51 4 0 222 16 935 divide rose 800 not last child border color var color rose 800 oklch 45 5 0 188 13 697 divide rose 900 not last child border color var color rose 900 oklch 41 0 159 10 272 divide rose 950 not last child border color var color rose 950 oklch 27 1 0 105 12 094 divide slate 50 not last child border color var color slate 50 oklch 98 4 0 003 247 858 divide slate 100 not last child border color var color slate 100 oklch 96 8 0 007 247 896 divide slate 200 not last child border color var color slate 200 oklch 92 9 0 013 255 508 divide slate 300 not last child border color var color slate 300 oklch 86 9 0 022 252 894 divide slate 400 not last child border color var color slate 400 oklch 70 4 0 04 256 788 divide slate 500 not last child border color var color slate 500 oklch 55 4 0 046 257 417 divide slate 600 not last child border color var color slate 600 oklch 44 6 0 043 257 281 divide slate 700 not last child border color var color slate 700 oklch 37 2 0 044 257 287 divide slate 800 not last child border color var color slate 800 oklch 27 9 0 041 260 031 divide slate 900 not last child border color var color slate 900 oklch 20 8 0 042 265 755 divide slate 950 not last child border color var color slate 950 oklch 12 9 0 042 264 695 divide gray 50 not last child border color var color gray 50 oklch 98 5 0 002 247 839 divide gray 100 not last child border color var color gray 100 oklch 96 7 0 003 264 542 divide gray 200 not last child border color var color gray 200 oklch 92 8 0 006 264 531 divide gray 300 not last child border color var color gray 300 oklch 87 2 0 01 258 338 divide gray 400 not last child border color var color gray 400 oklch 70 7 0 022 261 325 divide gray 500 not last child border color var color gray 500 oklch 55 1 0 027 264 364 divide gray 600 not last child border color var color gray 600 oklch 44 6 0 03 256 802 divide gray 700 not last child border color var color gray 700 oklch 37 3 0 034 259 733 divide gray 800 not last child border color var color gray 800 oklch 27 8 0 033 256 848 divide gray 900 not last child border color var color gray 900 oklch 21 0 034 264 665 divide gray 950 not last child border color var color gray 950 oklch 13 0 028 261 692 divide zinc 50 not last child border color var color zinc 50 oklch 98 5 0 0 divide zinc 100 not last child border color var color zinc 100 oklch 96 7 0 001 286 375 divide zinc 200 not last child border color var color zinc 200 oklch 92 0 004 286 32 divide zinc 300 not last child border color var color zinc 300 oklch 87 1 0 006 286 286 divide zinc 400 not last child border color var color zinc 400 oklch 70 5 0 015 286 067 divide zinc 500 not last child border color var color zinc 500 oklch 55 2 0 016 285 938 divide zinc 600 not last child border color var color zinc 600 oklch 44 2 0 017 285 786 divide zinc 700 not last child border color var color zinc 700 oklch 37 0 013 285 805 divide zinc 800 not last child border color var color zinc 800 oklch 27 4 0 006 286 033 divide zinc 900 not last child border color var color zinc 900 oklch 21 0 006 285 885 divide zinc 950 not last child border color var color zinc 950 oklch 14 1 0 005 285 823 divide neutral 50 not last child border color var color neutral 50 oklch 98 5 0 0 divide neutral 100 not last child border color var color neutral 100 oklch 97 0 0 divide neutral 200 not last child border color var color neutral 200 oklch 92 2 0 0 divide neutral 300 not last child border color var color neutral 300 oklch 87 0 0 divide neutral 400 not last child border color var color neutral 400 oklch 70 8 0 0 divide neutral 500 not last child border color var color neutral 500 oklch 55 6 0 0 divide neutral 600 not last child border color var color neutral 600 oklch 43 9 0 0 divide neutral 700 not last child border color var color neutral 700 oklch 37 1 0 0 divide neutral 800 not last child border color var color neutral 800 oklch 26 9 0 0 divide neutral 900 not last child border color var color neutral 900 oklch 20 5 0 0 divide neutral 950 not last child border color var color neutral 950 oklch 14 5 0 0 divide stone 50 not last child border color var color stone 50 oklch 98 5 0 001 106 423 divide stone 100 not last child border color var color stone 100 oklch 97 0 001 106 424 divide stone 200 not last child border color var color stone 200 oklch 92 3 0 003 48 717 divide stone 300 not last child border color var color stone 300 oklch 86 9 0 005 56 366 divide stone 400 not last child border color var color stone 400 oklch 70 9 0 01 56 259 divide stone 500 not last child border color var color stone 500 oklch 55 3 0 013 58 071 divide stone 600 not last child border color var color stone 600 oklch 44 4 0 011 73 639 divide stone 700 not last child border color var color stone 700 oklch 37 4 0 01 67 558 divide stone 800 not last child border color var color stone 800 oklch 26 8 0 007 34 298 divide stone 900 not last child border color var color stone 900 oklch 21 6 0 006 56 043 divide stone 950 not last child border color var color stone 950 oklch 14 7 0 004 49 25 divide mauve 50 not last child border color var color mauve 50 oklch 98 5 0 0 divide mauve 100 not last child border color var color mauve 100 oklch 96 0 003 325 6 divide mauve 200 not last child border color var color mauve 200 oklch 92 2 0 005 325 62 divide mauve 300 not last child border color var color mauve 300 oklch 86 5 0 012 325 68 divide mauve 400 not last child border color var color mauve 400 oklch 71 1 0 019 323 02 divide mauve 500 not last child border color var color mauve 500 oklch 54 2 0 034 322 5 divide mauve 600 not last child border color var color mauve 600 oklch 43 5 0 029 321 78 divide mauve 700 not last child border color var color mauve 700 oklch 36 4 0 029 323 89 divide mauve 800 not last child border color var color mauve 800 oklch 26 3 0 024 320 12 divide mauve 900 not last child border color var color mauve 900 oklch 21 2 0 019 322 12 divide mauve 950 not last child border color var color mauve 950 oklch 14 5 0 008 326 divide olive 50 not last child border color var color olive 50 oklch 98 8 0 003 106 5 divide olive 100 not last child border color var color olive 100 oklch 96 6 0 005 106 5 divide olive 200 not last child border color var color olive 200 oklch 93 0 007 106 5 divide olive 300 not last child border color var color olive 300 oklch 88 0 011 106 6 divide olive 400 not last child border color var color olive 400 oklch 73 7 0 021 106 9 divide olive 500 not last child border color var color olive 500 oklch 58 0 031 107 3 divide olive 600 not last child border color var color olive 600 oklch 46 6 0 025 107 3 divide olive 700 not last child border color var color olive 700 oklch 39 4 0 023 107 4 divide olive 800 not last child border color var color olive 800 oklch 28 6 0 016 107 4 divide olive 900 not last child border color var color olive 900 oklch 22 8 0 013 107 4 divide olive 950 not last child border color var color olive 950 oklch 15 3 0 006 107 1 divide mist 50 not last child border color var color mist 50 oklch 98 7 0 002 197 1 divide mist 100 not last child border color var color mist 100 oklch 96 3 0 002 197 1 divide mist 200 not last child border color var color mist 200 oklch 92 5 0 005 214 3 divide mist 300 not last child border color var color mist 300 oklch 87 2 0 007 219 6 divide mist 400 not last child border color var color mist 400 oklch 72 3 0 014 214 4 divide mist 500 not last child border color var color mist 500 oklch 56 0 021 213 5 divide mist 600 not last child border color var color mist 600 oklch 45 0 017 213 2 divide mist 700 not last child border color var color mist 700 oklch 37 8 0 015 216 divide mist 800 not last child border color var color mist 800 oklch 27 5 0 011 216 9 divide mist 900 not last child border color var color mist 900 oklch 21 8 0 008 223 9 divide mist 950 not last child border color var color mist 950 oklch 14 8 0 004 228 8 divide taupe 50 not last child border color var color taupe 50 oklch 98 6 0 002 67 8 divide taupe 100 not last child border color var color taupe 100 oklch 96 0 002 17 2 divide taupe 200 not last child border color var color taupe 200 oklch 92 2 0 005 34 3 divide taupe 300 not last child border color var color taupe 300 oklch 86 8 0 007 39 5 divide taupe 400 not last child border color var color taupe 400 oklch 71 4 0 014 41 2 divide taupe 500 not last child border color var color taupe 500 oklch 54 7 0 021 43 1 divide taupe 600 not last child border color var color taupe 600 oklch 43 8 0 017 39 3 divide taupe 700 not last child border color var color taupe 700 oklch 36 7 0 016 35 7 divide taupe 800 not last child border color var color taupe 800 oklch 26 8 0 011 36 5 divide taupe 900 not last child border color var color taupe 900 oklch 21 4 0 009 43 1 divide taupe 950 not last child border color var color taupe 950 oklch 14 7 0 004 49 3 divide custom property not last child border color var custom property divide value not last child border color value show more examples basic example use utilities like border rose 500 and border lime 100 to control the border color of an element border indigo 500 border purple 500 border sky 500 div class border 4 border indigo 500 div div class border 4 border purple 500 div div class border 4 border sky 500 div changing the opacity use the color opacity modifier to control the opacity of an element s border color border indigo 500 100 border indigo 500 75 border indigo 500 50 div class border 4 border indigo 500 100 div div class border 4 border indigo 500 75 div div class border 4 border indigo 500 50 div individual sides use utilities like border t indigo 500 and border r lime 100 to set the border color for one side of an element border t indigo 500 border r indigo 500 border b indigo 500 border l indigo 500 div class border 4 border indigo 200 border t indigo 500 div div class border 4 border indigo 200 border r indigo 500 div div class border 4 border indigo 200 border b indigo 500 div div class border 4 border indigo 200 border l indigo 500 div horizontal and vertical sides use utilities like border x indigo 500 and border y lime 100 to set the border color on two sides of an element at the same time border x indigo 500 border y indigo 500 div class border 4 border indigo 200 border x indigo 500 div div class border 4 border indigo 200 border y indigo 500 div using logical properties use utilities like border s indigo 500 and border e lime 100 to set the border inline start color and border inline end color logical properties which map to either the left or right border based on the text direction left to right right to left div dir ltr div class border s indigo 500 div div div dir rtl div class border s indigo 500 div div use the border bs and border be utilities to set the border block start color and border block end color logical properties which map to either the top or bottom border based on the writing mode div class border bs indigo 500 div divider between children use utilities like divide indigo 500 and divide lime 100 to control the border color between child elements 01 02 03 div class grid grid cols 3 divide x 4 divide indigo 500 div 01 div div 02 div div 03 div div using a custom value use the border value syntax to set the border color based on a completely custom value div class border 243c5a div for css variables you can also use the border custom property syntax div class border my border div this is just a shorthand for border var custom property that adds the var function for you automatically applying on focus prefix a border color utility with a variant like focus to only apply the utility in that state email address input class border 2 border gray 700 focus border pink 600 learn more about using variants in the variants documentation responsive design prefix a border color utility with a breakpoint variant like md to only apply the utility a...
|
