new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Tailwind CSS · Utilities reference · all subjects

border-color

11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

border-color utility classes and their CSS output

The border-color utilities are: border, border-x, border-y, border-s, border-e, border-bs, border-be, border-t, border-r, border-b, border-l, and divide. Each accepts color modifiers like -inherit, -current, -transparent, color names from the theme, custom properties with parentheses syntax, and arbitrary values with bracket notation. The border utility sets border-color; border-x sets border-inline-color; border-y sets border-block-color; border-s sets border-inline-start-color; border-e sets border-inline-end-color; border-bs sets border-block-start-color; border-be sets border-block-end-color; border-t sets border-top-color; border-r sets border-right-color; border-b sets border-bottom-color; border-l sets border-left-color; divide applies border-color to all children except the last using the selector & > :not(:last-child).

border-color with specific color modifiers

Each border-color utility accepts the modifiers -inherit (sets to inherit), -current (sets to currentColor), -transparent (sets to transparent), and color names prefixed with -. Color name modifiers use the theme colors and are output as CSS custom properties in the form var(--color-<name>). Custom property names can be passed using parentheses syntax with the form -(<custom-property>), and arbitrary values can be passed using bracket notation with the form -[<value>].

divide utility for border color between child elements

The divide utility controls the border color between child elements. It applies border-color to all children except the last child using the selector & > :not(:last-child). Use utilities like divide-indigo-500 and divide-lime-100 to control this border color. The divide utility accepts the same color modifiers as other border-color utilities.

Opacity modifier for border colors

Border color utilities support opacity modifiers using the slash notation: border-<color>/<opacity>. Examples include border-indigo-500/100, border-indigo-500/75, and border-indigo-500/50 where the value after the slash represents the opacity level.

State variant for border-color: focus

The focus state variant can be applied to border-color utilities using the focus: prefix. For example, focus:border-pink-600 applies a border color on the focus state. This is commonly used with form inputs to indicate focus.

Responsive design with border-color utilities

Border-color utilities support responsive variants. You can use responsive prefixes like sm:, md:, lg:, etc. to apply different border colors at different breakpoints. For example, border-blue-500 at the base level and lg:border-green-500 at larger screen sizes.

Logical properties for border color

Border color utilities support logical properties that adapt to text direction and writing mode. The border-s (start) and border-e (end) utilities map to either left or right based on text direction (dir attribute). The border-bs (block-start) and border-be (block-end) utilities map to top or bottom based on writing mode. These follow the CSS Logical Properties specification.

Example: Basic border color usage

Use utilities like border-rose-500 and border-lime-100 to control the border color of an element. Example: <div class="border-4 border-indigo-500 ..."></div> applies a 4px indigo border. Individual sides can be targeted: <div class="border-4 border-indigo-200 border-t-indigo-500 ..."></div> applies different colors to different sides.

Example: Horizontal and vertical border sides

<div class="border-4 border-indigo-200 border-x-indigo-500 ..."></div> applies indigo color to left and right borders. <div class="border-4 border-indigo-200 border-y-indigo-500 ..."></div> applies indigo color to top and bottom borders.

Example: Divide utility for child borders

<div class="grid grid-cols-3 divide-x-4 divide-indigo-500"><div>01</div><div>02</div><div>03</div></div> creates vertical dividers between the three columns with indigo borders.

Example: Focus state on input border

<input class="border-2 border-gray-700 focus:border-pink-600 ..." /> applies a gray border by default and changes to pink when focused.

Give your agent this brain