CSS Properties

Aligns a flex container's lines within it when there is extra space in the cross axis, similar to how justify-content aligns individual items within the main axis.

Defines the default behavior for how items are aligned along the cross axis (perpendicular to the main axis) in a flex or grid container.

Allows you to override the default alignment for a single item inside a Flex or Grid container. While 'align-items' sets the default for everyone, 'align-self' lets one item 'do its own thing'.

Defines a unique name for an element so it can be used as an anchor for other positioned elements. This creates the relationship needed for anchor positioning to work.

Limits where an anchor name can be 'seen.' This prevents anchor names from leaking into other parts of the page, allowing you to reuse the same anchor names in different components safely.

The 'brain' of modern scroll-driven animations. It links an animation to a timeline other than time—usually the scroll position of the page or the visibility of an element in the viewport.

Used to display an element using platform-native styling. Setting it to none is the first step in creating custom form controls like checkboxes or selects.

Sets a preferred ratio for an element's width and height, ensuring it maintains a specific shape (like square or widescreen) even as it resizes.

Applies graphical effects like blur or color shifts to the area *behind* an element, allowing you to create frosted-glass effects.

Determines if you can see the 'back' of an element when it's flipped in 3D space. Setting it to 'hidden' is essential for creating smooth card-flip animations where the back face shouldn't show through the front.

A massive shorthand for using an image (or gradient) to style an element's borders. It combines source, slice, width, outset, and repeat into one powerful line of CSS.

Controls how far outside the element's actual box the border image is drawn. It's useful for making a decorative border appear as if it's 'floating' around its container.

Defines how the border image is filled along the edges. 'Stretch' pulls the image thin, while 'repeat' or 'round' tiles it. 'Round' is often best because it scales tiles slightly to avoid cutting them off.

Determines how to 'cut' the border image into nine pieces (four corners, four edges, and a center). These pieces are then used to build the final border by resizing them to fit your element.

Specifies the image used as the border. You can use an actual image file (URL) or even a CSS gradient, which allows for advanced effects like gradient borders.

Sets the thickness of the border image. This can be different from the actual 'border-width', allowing you to scale the decorative image pieces independently of the box boundaries.

Creates a clipping region that sets what part of an element should be shown. Parts inside the region are visible, while those outside are hidden.

Tells the browser that an element and its content are independent of the rest of the page. This allows the browser to optimize rendering because it knows changes inside won't affect anything outside.

Defines the 'placeholder' block-size (height) of an element when it is subject to size containment (e.g., when off-screen). This prevents layout shifts when content loads or scrolls into view.

Sets the placeholder height for an element under size containment. It ensures the element occupies space even if its content isn't being rendered yet.

Defines the placeholder inline-size (width) of an element when it is under size containment, preventing layout instability.

A shorthand property to set both the width and height an element should 'pretend' to have when it is under size containment. This is a game-changer for scroll performance.

Sets the placeholder width for an element under size containment, helping the browser calculate layout without rendering the full content.

Assigns a name to a container so that nested elements can style themselves based on that specific container's size or state.

Defines an element as a 'container' so its children can query its size or state. 'inline-size' is the most common value, allowing responsive styles based on the container's width.

Allows the browser to skip the rendering work for elements that are currently off-screen. Setting it to 'auto' can drastically improve the initial load speed and scroll performance of long pages.

Defines the initial size of a flex item before the container distributes any remaining space. It works like width or height depending on the flex-direction.

Determines the orientation of flex items in a container, essentially choosing whether they form a horizontal row or a vertical column.

A shorthand property that combines 'flex-direction' and 'flex-wrap'. It lets you set the direction of items and whether they should wrap in one line of code.

Defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion; it dictates how much of the available space inside the flex container the item should take up.

Defines the ability for a flex item to shrink if necessary. It works as a proportion; if the container is too small, items with a higher shrink value will shrink more to fit.

Allows flex items to spill over into multiple lines when they run out of room, rather than squishing together on a single line.

Allows you to select a specific color palette for a color font (font that has multiple colors built-in), often used for icon fonts or emojis.

Ensures that if your primary font fails to load, the fallback font is automatically resized to match the same visual height (x-height), preventing the layout from jumping or text becoming unreadable.

A shorthand property that lets you control advanced typographic features like small caps, old-style numerals, and special ligatures. It helps you make text look more professional and polished if the font supports it.

A property that lets you toggle stylistic alternates in a font (like different ways to draw the letter 'g' or 'a') if the font has multiple versions of those characters.

Allows you to use special 'all-caps' or 'small-caps' styles built into a font. Smaller caps are often used to make acronyms look more harmonious with lowercase text.

A property that controls specialized typographic features for East Asian writing systems, like Japanese and Chinese (e.g., Ruby characters).

Controls 'ligatures'—where two or more characters are merged into a single decorative shape (like 'fi' or 'fl' touching).

Controls how numbers are displayed. You can use it to create 'old-style' numbers, slashed zeros (to distinguish 0 from O), or fractions.

A property that lets you use real, typographically correct subscript and superscript characters built into a font, rather than having the browser 'fake' them with small offsets.

Sets the distance between rows and columns in grid, flex, or multi-column layouts. It is a shorthand for row-gap and column-gap.

A shorthand property for setting all the explicit and implicit grid properties in a single declaration. It allows you to define rows, columns, and templates quickly.

A shorthand property that lets you assign an element to a specific named area or set of lines within a CSS Grid, defining its position and size in one line.

Sets the size of any columns that the browser creates automatically (implicit columns) when you place items outside of your explicitly defined grid columns.

Determines the algorithm used to automatically place grid items that aren't specifically positioned. It can fill row by row, column by column, or try to fill gaps 'densely'.

Sets the size of any rows that the browser creates automatically (implicit rows) when items spill over your explicitly defined grid rows.

A shorthand property for 'grid-column-start' and 'grid-column-end'. It defines an item's horizontal position and width within a grid in a single line.

Defines which vertical grid line a grid item should end at. You can specify a line number, a named line, or use 'span' to say how many columns it should cover.

Defines which vertical grid line a grid item should begin at. You can specify a line number or a named line.

A shorthand property for 'grid-row-start' and 'grid-row-end'. It defines an item's vertical position and height within a grid in one line.

Defines which horizontal grid line a grid item should end at. You can use line numbers, names, or 'span' keywords.

Defines which horizontal grid line a grid item should begin at. You can specify a line number or a named line.

A powerhouse shorthand that lets you define 'grid-template-rows', 'grid-template-columns', and 'grid-template-areas' all at once. Perfect for defining a full page layout in one property.

Allows you to design a grid layout using 'named areas'. You can draw a visual map of your page using strings, making complex layouts much easier to read.

Defines the number and widths of columns in a grid. You can set fixed sizes, percentages, or use the 'fr' unit to fill available space.

Defines the height of each row in a grid. You can set fixed heights, use percentages, or the 'fr' unit to fill available vertical space.

Defines how the browser distributes space between and around content items along the main axis of a flex container or the inline axis of a grid container.

Defines the default alignment for all items inside a grid container along the inline (horizontal) axis.

Allows a single item inside a grid or flex container to override the default alignment set by its parent.

A shorthand property for setting all the list style properties at once. It's most commonly used to remove bullets entirely.

Allows you to use an image (like a tiny icon or logo) as the bullet point for list items.

Determines whether the list bullet appears inside or outside the text block. 'inside' makes the bullet part of the first line of text, while 'outside' keeps it in the margin.

Sets the marker (bullet or number) for a list item element. You can choose from built-in shapes, numbers, or even custom strings.

A shorthand property for setting all the individual motion path properties (path, distance, rotation, etc.) in a single line.

Defines the point of the element that is actually 'attached' to the motion path. By default, it's the center, but you can change it to a corner or specific position.

Specifies how far along a motion path (defined by offset-path) an element should be placed. It's usually animated from 0% to 100%.

Defines the actual path an element should follow during a motion animation. You can use SVG path strings, shapes (like circles), or даже browser curves.

Sets the initial starting position of a motion path. It determines where the 'zero point' of the path is located relative to the element's container.

Controls the rotation of an element as it moves along a path. By default, 'auto' makes the element 'face' the direction it's moving.

Changes the visual order of items within a Flexbox or Grid container without changing their actual order in the HTML code.

A shorthand for setting how the browser handles reaching the boundary of a scroll area in both directions. It helps stop annoying 'scroll chaining'.

A logical property that controls what happens when you reach the end of a scroll area in the block (vertical) direction. It prevents 'scroll chaining' to the parent container.

A logical property that controls what happens when you reach the end of a scroll area in the inline (horizontal) direction. It prevents 'scroll chaining' to the parent container.

Controls what happens when you reach the end of a horizontal scroll zone. It's often used to keep users from accidentally navigating 'back' or 'forward' with swipe gestures.

Controls what happens when you reach the end of a vertical scroll zone. This is the most common way to stop the background page from scrolling when a popup or menu is open.

Gives an element a 3D feel by setting the distance between the viewer and the 'z=0' plane. A smaller number creates a more intense 3D effect.

Sets the 'vanishing point' for a 3D transformation. It determines the position from which the viewer is looking at the 3D space.

A shorthand for setting both 'align-content' and 'justify-content' at once. It controls how the alignment of the entire content block (not individual items) happens within its container.

A shorthand for setting both align-items and justify-items in a single property. It's incredibly useful for quick centering in CSS Grid.

A shorthand for setting both 'align-self' and 'justify-self' on a single item. It lets one specific item in a Flex or Grid container override the default alignment of the group.

Specifies which defined anchor element a positioned element should track. It connects the positioned element to its anchor by name.

A newer, simplified way to position an element relative to its anchor. Instead of manually calculating top/left, you can use logical regions like 'top-right' or 'bottom-center'.

Part of the Anchor Positioning API, this property lets you define a list of 'backup' positions for an element. If the primary position would cause the element to overflow its container, the browser will try these fallbacks instead.

Determines the order in which the browser tries the fallback positions defined in 'position-try-fallbacks'. You can tell the browser to prioritize the position with the most available space.

Controls when an anchor-positioned element should be shown or hidden based on the visibility of its anchor. For example, you can hide a tooltip if its anchor is scrolled out of view.

Sets the size of the gap (gutter) between rows in a Grid, Flexbox, or Multi-column layout.

Sets the behavior for a scrolling box when scrolling is triggered by navigation or CSSom scrolling APIs. smooth creates a nice transition instead of an instant jump.

Defines the margin (offset) of an element when it is scrolled into view via scroll-snapping or anchor links. This is extremely useful for preventing fixed headers from covering the top of a section.

A shorthand that sets both the start and end scroll margins at the same time. It creates a 'snap buffer' in the vertical direction (or whatever the 'block' axis is).

Sets the margin between the end of an element and the edge of its scroll container specifically for 'scroll snapping'. This ensures that when an element snaps into view, it doesn't bump directly against the edge.

Sets the 'snap margin' at the start of an element. This is perfect for ensuring that when you scroll to a section, your 'sticky' header doesn't cover up the section's' title.

Forces a specific amount of empty space at the bottom of an element when it's being snapped into place by the browser.

A shorthand that sets both the start and end scroll margins in the horizontal (inline) direction at once.

Sets the snap margin at the 'end' of an element in the text flow (usually the right side in English). It ensures a gap between the element and the edge of the scroll container when it snaps.

Sets the snap margin at the 'start' of an element in the text flow (usually the left side in English). This is great for horizontal carousels to keep the current item from hugging the left edge.

Forces a specific amount of empty space on the left side of an element when it's snapped into place by the browser.

Forces a specific amount of empty space on the right side of an element when it's snapped into place by the browser.

Forces a specific amount of empty space at the top of an element when it's snapped into place. Extremely common for preventing sticky headers from overlapping your anchor targets.

Sets the padding (inner offset) of a scroll container. It ensures that when elements snap or are scrolled into view, they stay a certain distance away from the edges of the container.

Sets the padding at the end of the scroll container's 'snapping area'. While 'scroll-margin' is set on the items, 'scroll-padding' is set on the container itself.

Sets the padding at the start of the scroll container's 'snapping area'. It's applied to the SCROLL CONTAINER and affects how ALL items inside it are positioned when snapped.

Sets the snap padding at the bottom of the scroll container. It essentially creates a 'safe zone' at the bottom of the scroller so that snapped items don't hit the very edge.

A shorthand that sets both the start and end scroll padding in the horizontal (inline) direction on a container.

Sets the snap padding at the 'end' of the scroll container in the text flow (usually the right side). Applied to the container, it affects where all items inside will snap.

Sets the snap padding at the 'start' of the scroll container in the text flow (usually the left side). Keeps snapped items from hugging the left edge.

Sets a fixed amount of padding on the left side of a scroll container that specifically interacts with scroll snapping.

Sets a fixed amount of padding on the right side of a scroll container that specifically interacts with scroll snapping.

Sets a fixed amount of padding on the top of a scroll container that specifically interacts with scroll snapping. Often applied to the root element to account for sticky headers.

Used on children within a scroll-snap container to define which part of the element should snap to the container. You can snap to the start, center, or end of the element.

Determines whether a scroll container is allowed to 'skip' snap points when the user is scrolling quickly. Setting it to 'always' forces the scroll to stop at every single item.

Enables scroll snapping on a container, forcing the scroll position to 'snap' to certain elements. It converts a smooth scroll into a stepped, slider-like experience.

Links an animation's progress directly to the scroll position of a scroll container. This replaces time-based durations with scroll-based progress.

Defines the axis of a scroll container that will drive the progress of a scroll timeline — either block (vertical) or inline (horizontal).

Assigns a custom name to a scroll timeline, allowing it to be referenced by the animation-timeline property on other elements.

A shorthand property that sets the appearance of decorative lines on text, such as underlines, overlines, and strike-throughs.

Sets the color of the lines defined by 'text-decoration-line' (like underlines, overlines, or strike-throughs).

Sets which type of decorative line should be added to the text. You can add more than one line at once (like an underline and an overline).

A broader property that defines which parts of an element's content should be skipped by its text decorations. For example, you can tell an underline to skip spaces or the edges of the box.

Controls how underlines are drawn when they cross the 'descenders' of characters (like the tails on 'g', 'j', or 'p'). Setting it to 'auto' makes the line skip over the tails for a cleaner look.

Sets the visual style of the decoration lines. You can make underlines wavy, dashed, dotted, or double.

Sets the thickness (stroke width) of the decoration lines. You can use standard units like pixels or percentages to make underlines thicker or thinner.

The shorthand property for 'text-wrap-mode' and 'text-wrap-style'. It provides a powerful way to control both if text wraps and how the wrapping algorithm behaves.

A newer way to define if text should wrap to the next line or not. This is essentially a more modern version of the 'white-space' property for wrapping.

Controls the algorithm used to wrap text. 'balance' is perfect for short headlines to ensure lines are roughly equal in length, while 'pretty' avoids 'orphans' (single words on a new line) in paragraphs.

Applies 2D or 3D transformations to an element, allowing you to rotate, scale, skew, or move it in space.

Sets the anchor point for a transform. For example, if you rotate a square, 'transform-origin' decides if it spins around its center, one of its corners, or even a point outside the square entirely.

Determines if child elements should be rendered 'flat' against their parent or if they should exist in their own 3D space. This is essential for creating complex 3D scenes (like a rotating cube) where children need to overlap in a 3D environment.

Allows you to enable transitions for properties that normally switch instantly, like 'display'. By setting it to 'allow-discrete', you can create entry and exit animations for elements that are removed from the DOM or hidden.

A shorthand for defining a scroll timeline that is tied to when an element enters and leaves the visible part of the screen (the viewport). It's the core of modern 'reveal on scroll' animations.

Specifies the axis (vertical or horizontal) that a 'view-timeline' should follow. For most standard web pages, this is 'block' (vertical scrolling).

Allows you to offset the 'start' and 'end' points of a view-timeline. This is useful if you want an animation to start before an element is fully on screen (e.g., when it's 20% visible) or continue after it has partially left.

Defines a name for a view-timeline, which tracks an element's visibility within its scroll container. You can then use this name in your 'animation-timeline' property to trigger animations based on the element's position as you scroll.

Allows you to apply names or 'classes' to specific view transitions. This makes it easier to target groups of elements with the same transition effects, rather than having to define them individually for every single element.

The core property for enabling view transitions on specific elements. By giving an element a 'view-transition-name', the browser will automatically track its position and size across page changes and animate the difference.

Defines whether lines of text are laid out horizontally or vertically, and the direction in which blocks progress. This is essential for supporting languages like Chinese, Japanese, or Arabic, and for creative layouts like vertical sidebars.

A non-standard (but now widely supported) property that scales the entire element. While 'transform: scale()' is usually better for modern layouts, 'zoom' is still used for simple scaling without affecting the surrounding layout flow as much.

Sets the color for the inside of text characters. It's almost always used alongside 'background-clip: text' and a transparent 'color' to create text with image backgrounds or gradients.

A shorthand for setting both the thickness and the color of text outlines in one line. Great for creating 'hollow' or 'ghost' text effects.

Sets the color of the outline (stroke) around text characters. Best used with a large font size to ensure the text remains readable.

Defines how thick the outline (stroke) around text characters should be. Keep it subtle (1-2px) to prevent the text from looking distorted.

Sets the accent color for user-interface controls like checkboxes, radio buttons, and range sliders. It allows you to style native forms with your brand color with a single line of CSS.

Controls how an inline-level element (usually SVG text) aligns itself with the vertical baseline of its parent. It's essentially the 'vertical-align' for SVG text.

A 'big reset' property that forces every single CSS property on an element (except direction and language) back to its starting state. Useful for clearing out unwanted styles from themes or parent elements.

A shorthand property that applies an animation to an element. It links the element to a set of @keyframes and defines how that animation should behave.

Determines how the browser should mix multiple animations targeting the same property. You can either replace the previous value, add to it, or accumulate it (useful for stacking transforms).

Sets a timer before an animation starts playing. You can use positive values to wait, or negative values to make the animation look like it's already halfway through its first cycle.

Defines whether an animation should play forwards, backwards, or alternate back and forth on every other cycle. Useful for creating smooth 'yo-yo' effects.

Specifies how long it takes for an animation to complete one full cycle (from 0% to 100%). Use seconds (s) or milliseconds (ms).

Determines how an element should look before the animation starts and after it finishes. 'forwards' is the most common use, as it keeps the final frame of the animation visible.

Sets the number of times an animation should play before stopping. You can use whole numbers (1, 2, 3) or 'infinite' for a never-ending loop.

Specifies the name of one or more @keyframes at-rules that should be applied to the selected element.

Allows you to pause and resume a running animation. Typically used in combination with :hover or JavaScript to freeze an animation when a user interacts with it.

A shorthand property for setting both the start and end points of a scroll-driven animation. It's the most concise way to define the 'active window' for a scroll effect.

Defines where a scroll-driven animation should reach 100% completion. For example, you can stop the animation exactly when an element exits the top of the viewport.

Defines the exact point in a scroll timeline where the animation should begin (0%). This allows you to delay the start of an animation until an element is partially visible.

Defines the speed curve of an animation, such as 'ease-in', 'ease-out', or 'linear'. It controls whether the animation feels organic and bouncy or robotic and steady.

An experimental property that allows you to define exactly when an animation should start playing based on conditions like visibility in the viewport. It's part of the effort to make scroll and view-driven effects more declarative.

The ultimate shorthand for setting all background properties (color, image, repeat, etc.) in a single line. It's the most common way to style backgrounds efficiently.

Controls whether a background image stays fixed in place or scrolls along with the content. 'fixed' is often used to create a simple parallax-like effect where the page content slides over a static image.

Sets how an element's multiple background images and background color should blend with each other.

Specifies the 'boundary' for where the background should be visible. For example, you can clip the background to only show inside the element's text, or only within its padding area.

Sets the background color of an element. It fills the space behind the content, padding, and border of the element.

Sets one or more background images for an element. This can be a URL to an image file or a CSS gradient function.

Sets the starting point for where a background image is positioned. Unlike 'background-clip' which hides parts of the background, 'background-origin' actually shifts the starting (0,0) coordinate of the image.

Sets the initial position of a background image. You can use keywords (center, top), percentages, or length values to move the image within its container.

Specifically controls the horizontal (left-to-right) position of a background image. This is useful when you want to change only the horizontal position via hover or animation without touching the vertical position.

Specifically controls the vertical (top-to-bottom) position of a background image. It allows you to adjust the vertical alignment specifically, which is perfect for shifting backgrounds on scroll.

Sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.

A non-standard (but widely supported) property that specifically controls whether a background image repeats horizontally. It is usually easier to use the standard 'background-repeat' property instead.

A non-standard (but widely supported) property that specifically controls whether a background image repeats vertically. It is usually easier to use the standard 'background-repeat' property instead.

Sets the size of the element's background image. Images can be left to their natural size, stretched, or constrained to fit the available space.

Used in SVG to move text vertically relative to its baseline. It's the primary way to create subscripts or superscripts within SVG text elements without changing font sizes.

Determines which line box's baseline is used as the reference for an element with multiple lines. For example, you can choose to align an inline-block based on its first line of text or its last line.

Defines the 'height' of an element in a way that respects the writing mode. If you switch from horizontal to vertical text, 'block-size' automatically switches from height to width so your layout remains consistent.

A shorthand property that sets an element's border width, style, and color in a single declaration.

The most powerful logical shorthand for borders. It sets the width, style, and color of both the 'start' and 'end' borders in the block dimension with a single line of CSS.

Sets the color of the borders in the block dimension (top and bottom in horizontal text). It's a logical way to style both 'vertical' ends of a box at once.

A shorthand for setting the width, style, and color of the 'end' side border in the block dimension. It's the logical equivalent of styling a bottom border.

Sets the color of the 'end' side of the block dimension (usually the bottom border). Using logical properties like this makes your CSS more readable for multi-language sites.

Specifies whether the 'end' block border is solid, dashed, dotted, etc. In standard horizontal English text, this corresponds to the bottom border style.

Defines the thickness of the logical 'end' border. This is a modern replacement for 'border-bottom-width' that adapts to different writing modes.

A shorthand for setting the width, style, and color of the 'start' side border in the block dimension. Effectively styles the top border in horizontal writing modes.

Sets the color of the 'start' side of the block dimension (usually the top border). Part of the logical properties set for more flexible layout systems.

Determines the line style (solid, dashed, etc.) for the 'start' side border. In standard western layouts, this is the top border.

Defines the thickness of the logical 'start' border. It replaces 'border-top-width' in modern CSS to better support different writing directions.

Sets the line style for both block-dimension borders (top and bottom) with one declaration. Using 'solid' is the most common way to define these boundaries.

Sets the thickness of the borders in the block dimension (usually top and bottom). It's a convenient way to adjust the vertical thickness of a box's borders simultaneously.

The shorthand to define width, style, and color for just the bottom edge of an element. It's the standard way to create underlines, dividers, and bottom-aligned accents.

Sets the color of the bottom border specifically. It's often used to create 'underline' effects on headings or nav links that are stylistically distinct from regular text underlines.

Specifically rounds the bottom-left corner of an element. This is useful for creating unique shapes like speech bubbles or tabbed interfaces where only certain corners should be rounded.

Specifically rounds the bottom-right corner of an element. It helps in building modern UI components like cards with soft corners or asymmetric decorative boxes.

Sets the line style for the bottom border. Beyond the standard 'solid', you can use 'dashed' or 'dotted' for separating content blocks without being too heavy.

Controls the thickness of the bottom border. It is frequently paired with a specific color to create focus indicators or status bars.

Determines whether table cells have shared or separate borders. 'Collapse' is the most common setting used to create clean, single-line borders between cells.

A shorthand property that sets the color for all four borders of an element. If you provide four values, it sets them in 'top right bottom left' order.

The logical way to round the 'bottom-right' corner (in standard English text). It automatically moves to the bottom-left if you switch to a right-to-left language, keeping your layout consistent.

Rounds the corner where the 'end' of the block dimension meets the 'start' of the inline dimension (bottom-left in LTR). Like all logical properties, it adapts to the text direction.

The logical shorthand for setting width, style, and color for both the 'start' and 'end' borders in the inline dimension (left and right in LTR).

Sets the color for both borders in the inline dimension (usually left and right). It's the logical way to style 'horizontal' edges at once, adapting perfectly for right-to-left text.

A shorthand for setting the width, style, and color of the 'end' side border in the inline dimension. It's the logical successor to 'border-right'.

Sets the color for the 'end' side of the inline dimension (usually the right border). It ensures the border stays on the 'exit' side of text even if the language direction changes.

Specifies the line style for the logical 'end' border. In standard western layouts, this is the right border style.

Defines the thickness of the logical 'end' border. Replaces 'border-right-width' to ensure the boundary stays on the correct side regardless of text direction.

A shorthand for setting the width, style, and color of the 'start' side border in the inline dimension. It's the logical equivalent of styling a left border.

Sets the color of the 'start' side of the inline dimension (usually the left border). It allows for easier localization without writing direction-specific overrides.

Determines the line style (solid, dashed, etc.) for the 'start' side border. Replaces 'border-left-style' for better international formatting.

Defines the thickness of the logical 'start' border. It's the modern way to set a left border that flips to the right in RTL languages.

Sets the line style for both inline-dimension borders (left and right) with one declaration. Using 'solid' is the standard for defining box boundaries.

Sets the thickness of both logical inline borders (left and right) simultaneously. A convenient logical shorthand for symmetrical horizontal borders.

A shorthand for setting the physical left border's width, style, and color in one line. Perfect for adding a simple vertical line to the side of an element.

Sets the color of the left border. While logical properties like 'border-inline-start-color' are often preferred for modern apps, this remains the standard way to target the physical left side specifically.

Determines the line style (solid, dashed, etc.) of the physical left border. Without a set style, the border won't appear even if you give it a width.

Controls the thickness of the physical left border. It can take keyword values like 'thin' or 'thick', but specific pixel values are most common.

Defines the radius of an element's corners, allowing you to create rounded corners or circular shapes.

A shorthand for setting the physical right border's width, style, and color. It's the standard physical counterpart to the modern 'border-inline-end' property.

Sets the color of the physical right border. Useful for specific side-styling where you don't want the side to flip automatically in RTL languages.

Determines the line style of the physical right border. Common values include 'solid', 'double', or 'dotted'.

Controls the thickness of the physical right border. Often used to create visual separation in navigation bars or lists.

Determines the distance between the borders of adjacent table cells. Note that this property only works if 'border-collapse' is set to 'separate'.

The logical way to round the corner where the 'start' of the block (top) meets the 'end' of the inline dimension (right in LTR). It adapts to writing mode changes automatically.

Rounds the corner where the 'start' of the block (top) and the 'start' of the inline dimension (left in LTR) meet. This is the logical successor to 'border-top-left-radius'.

A shorthand for setting the line style of all four borders at once. Without a style (like 'solid' or 'dashed'), borders are invisible by default.

A shorthand for setting the width, style, and color of the physical top border in a single declaration.

Sets the color of the physical top border. Often used to create distinct top-bar accents on cards or containers.

Defines the radius curve of the physical top-left corner. While logical alternatives exist, this remains the most common way to round specific corners in CSS.

Defines the curve of the physical top-right corner. It can take one or two values to create circular or elliptical curves.

Sets the line style for the physical top border. You must set a style other than 'none' for the border to be rendered.

Specifies the thickness of the physical top border. It's often used for decorative 'top-border' highlights on layout components.

A shorthand for setting the thickness of all four borders. You can provide 1, 2, 3, or 4 values to target different sides specifically.

Sets the vertical distance between the bottom edge of a positioned element and the bottom edge of its containing block.

Controls how an element's fragments (like when a line of text wraps or breaks across pages) are styled. 'Clone' repeats the padding and borders on every fragment, while 'slice' cuts them off.

Adds shadow effects around an element's frame. It can be used to create depth, elevation, or subtle glows.

Sets how the total width and height of an element is calculated. border-box includes padding and border in the size, while content-box does not.

Defines what kind of break (page, column, or region) should happen after an element. Commonly used in multi-column layouts or print CSS to force content onto a new page/column.

Specifies whether a page, column, or region break should occur before an element. Useful for ensuring headers always start a new column or page.

Determines if an element should be allowed to split across pages or columns. Setting it to 'avoid' is the standard way to prevent images or cards from getting cut in half.

Specifies whether the caption of a table (the <caption> element) should be placed above or below the table content.

An experimental property to control the blinking behavior of the text cursor (caret). Setting it to 'manual' allows you to disable the default blink.

Sets the color of the text cursor (caret) in inputs, textareas, or any editable element. This is a great way to maintain brand colors even in form fields.

Determines the visual shape of the text cursor. You can choose between the standard vertical bar, a block, or an underscore (terminal-style).

Specifies whether an element should be moved below any 'floating' elements that come before it. It's the classic way to 'break' out of a float layout and start fresh on a new line.

A legacy property used to define which portion of an absolutely positioned element is visible. It has been replaced by the more powerful and flexible 'clip-path' property.

An SVG-related property that determines how to calculate the 'insideness' of a point in a clipping path. 'Evenodd' is often used for complex shapes with holes.

A legacy property (deprecated in favor of 'print-color-adjust') that tells the browser whether it can override colors to save ink or improve readability when printing.

An SVG property that determines which color space should be used for gradient interpolations and color animations.

Specifies the color space for imaging operations performed via filter primitives. It's an internal SVG detail for how colors are calculated during complex filtering.

Tells the browser which color themes (light, dark) the element can be rendered in. This automatically adjusts UI elements like scrollbars and form controls to match the theme.

Splits the content of an element into a specified number of columns, similar to a newspaper layout.

Controls how content is distributed across columns. 'Balance' tries to make all columns equal in height, while 'auto' fills them one after another until they reach their height limit.

Sets the size of the gap (gutter) between columns in multi-column, flex, or grid layouts.

An experimental property that allows setting a specific height for columns in a multi-column layout.

A shorthand property that sets the width, style, and color of the vertical line (rule) drawn between columns in a multi-column layout.

Sets the color of the vertical line (rule) drawn between the columns of a multi-column layout.

Determines the line style (solid, dashed, dotted, etc.) of the vertical line drawn between columns.

Sets the thickness of the vertical line drawn between columns in a multi-column layout.

Allows an element (like a header) to stretch across all columns instead of being confined to a single column in a multi-column layout.

Sets the ideal width for columns in a multi-column layout. The browser will create as many columns of at least this width as it can fit in the container.

An experimental property to control whether content should wrap into new columns or overflow in a multi-column layout.

A shorthand property that allows you to easily create multi-column text layouts, similar to a newspaper or magazine.

Used with the ::before and ::after pseudo-elements to generate content on a page. It can be text, images, or even the value of an attribute.

An experimental shorthand for styling the shapes (round, angled, etc.) of the corners at the end of the block axis (usually bottom-left and bottom-right).

An experimental shorthand for styling the shapes of the corners at the start of the block axis (usually top-left and top-right).

An experimental property to define the specific shape of the bottom-left corner. You can choose from 'round', 'angle' (beveled), or other shapes.

An experimental property for the bottom-right corner shape. Part of the new efforts to give designers more control over corner aesthetics beyond simple rounding.

An experimental shorthand to set the physical shape of both bottom corners simultaneously.

An experimental property to set the shape of the corner at the end of both the block and inline axes (usually the bottom-right corner in LTR languages).

An experimental property to set the shape of the corner at the end of the block axis and start of the inline axis (usually the bottom-left corner).

An experimental shorthand to set the shape of both corners on the inline-end side of an element (usually the right side).

An experimental shorthand to set the shape of both corners on the inline-start side of an element (usually the left side).

An experimental physical shorthand to set the shape of both left corners (top-left and bottom-left) simultaneously.

An experimental physical shorthand to set the shape of both right corners (top-right and bottom-right) simultaneously.

A master shorthand property that allows you to set the shape of all four corners of an element. This is the cornerstone of the new 'CSS Borders 4' features for advanced corner styling.

An experimental property to set the shape of the corner at the start of the block axis and end of the inline axis (usually the top-right corner).

An experimental property to set the shape of the corner at the start of both the block and inline axes (usually the top-left corner).

An experimental property for the top-left corner shape. It gives designers more control, allowing for beveled or angled corners instead of just rounded ones.

An experimental property for the top-right corner shape. Part of the new efforts to provide advanced border styling in CSS.

An experimental shorthand to set the physical shape of both top corners (top-left and top-right) at once.

Advances a CSS counter by a specified value (default is 1). It's commonly used to number items like chapters, sections, or images in complex documents.

Resets a CSS counter to a specific value (default is 0). It's typically used on a parent element to start a new sequence for its children.

Sets a CSS counter to a specified value. Unlike 'counter-reset', which starts a new scope, 'counter-set' modifies the value of an existing counter within the current scope.

Sets the mouse cursor to show when the mouse pointer is over an element. Common values include pointer for links, wait for loading states, and help.

Commonly known as 'CSS Variables'. They allow you to store values (like colors or sizes) in a name starting with '--' and reuse them throughout your stylesheet using the 'var()' function.

Defines the x-coordinate of the center of an SVG element, like a <circle> or <ellipse>. You can now control this directly via CSS properties.

Defines the y-coordinate of the center of an SVG element, like a <circle> or <ellipse>. This works similarly to 'cx' but for the vertical axis.

A CSS property that allows you to define the shape of an SVG <path> element. This is powerful for animating paths or changing them purely with CSS (e.g., on hover).

Specifies the base text direction for an element. 'ltr' is for languages like English, and 'rtl' is for languages like Arabic or Hebrew.

Defines the internal and external display types of an element. It determines if an element behaves like a block or inline box and how its children are laid out.

An SVG property that determines which baseline is used to align text. It's crucial for vertical alignment of text and icons within SVG graphics.

A cutting-edge property that allows you to limit the maximum brightness of colors on HDR (High Dynamic Range) displays. This is useful for preventing eye strain when bright white elements are displayed on HDR screens.

A table property that determines if borders and backgrounds should be shown for cells that have no visible content.

A modern property that allows form fields (like textareas) to automatically grow or shrink based on the amount of text typed into them, without needing JavaScript.

Sets the color or pattern used to paint the inside of an SVG shape. It is the SVG equivalent of the 'background-color' property for regular HTML elements.

An SVG property that controls the transparency of the inner fill of a shape or text. A value of 0 is fully transparent, and 1 is fully opaque.

An SVG property that determines how the interior of a complex shape (with overlapping paths) is filled with color.

Applies graphical effects like blur, brightness, or color shifts to an element, similar to image editing software effects.

An older layout property that pushes an element to the left or right, allowing text and other content to wrap around it. Often used for images within articles.

An SVG property that sets the color of an SVG filter's flood area. It's often used with 'feFlood' to fill a region with a solid color for lighting or shadow effects.

An SVG property that sets the transparency level of an SVG filter's flood color. 0 is invisible, 1 is fully solid.

An experimental property related to how text flows and its tolerance for line-breaking or overflows, currently mostly seen in Safari/WebKit.

A powerful shorthand property that lets you set many text-related properties (like size, weight, and family) all in one go. It's the most efficient way to define the overall look of your text.

Specifies a prioritized list of one or more font family names and/or generic family names for the selected element.

A low-level property that gives you control over OpenType font features like ligatures, kerning, and advanced typographic alternates.

Controls how the spacing between specific pairs of letters is adjusted (e.g., pulling 'A' and 'V' closer together) to make text look more balanced.

A specialized property that forces a font to use typographic rules for a specific language, regardless of what the document's actual language is set to.

For variable fonts, this property automatically adjusts the shape of letters to be more readable at small sizes or more elegant at large sizes.

Sets the size of the font. This is one of the most fundamental properties for defining the visual scale of text on a page.

Allows you to choose a wider or narrower version of a font if the font family supports it (commonly used with variable fonts to squeeze or stretch text).

Sets whether text should be rendered in an upright (normal), slanted (italic), or skewed (oblique) style.

A shorthand property that controls whether the browser can 'fake' bold, italic, or small-caps styles if the font doesn't provide them.

Controls whether the browser is allowed to 'fake' subscript or superscript positions if the font doesn't have them built-in.

Controls whether the browser is allowed to 'fake' small-caps by shrinking capital letters if the font doesn't have a real small-caps version.

Controls whether the browser is allowed to 'fake' an italic style by slanting the text if a real italic font file isn't available.

Controls whether the browser is allowed to 'fake' a bold look by thickening the strokes if a real bold font file isn't available.

Enables you to force a character to look like a colorful emoji or a simple black-and-white text symbol, assuming the font supports both.

A low-level property used for controlling 'variable fonts'. It allows you to fine-tune axes like weight, width, slant, or custom axes with unprecedented precision.

Sets the thickness or boldness of the font. Values can be keywords like 'bold' or numbers (e.g., 400 for regular, 700 for bold).

A modern property (mostly in Safari/WebKit) that specifically controls the width axis of a variable font, similar to 'font-stretch' but with a more direct name.

Controls whether the browser is allowed to override an element's colors (like when 'High Contrast Mode' is active on Windows). It's handy for preserving specific brand colors that might otherwise be hidden.

A deprecated property used in SVG to control the orientation of characters when text is written vertically. Use 'text-orientation' in modern CSS instead.

Allows punctuation marks (like quotation marks or hyphens) to be placed outside the text box alignment, making the edges of a paragraph look cleaner and straighter.

Sets the height of an element. It defines the vertical space an element occupies.

Sets the character used when a word is broken at the end of a line. While usually a hyphen (-), you can change it to something else (like an arrow or a different symbol).

Sets rules for how and when a word should be hyphenated, such as the minimum word length or the minimum number of characters left at the start or end of a line.

Controls whether the browser is allowed to automatically break words with hyphens to prevent large gaps in text alignment.

Controls whether an image is automatically rotated based on its 'EXIF' metadata (data captured by cameras about how the photo was taken).

Determines how the browser should upscale or downscale an image. It's especially useful for making pixel art look sharp ('pixelated') rather than blurry when enlarged.

An old, mostly deprecated property used to control the 'Input Method Editor' (like character pickers for non-English languages). It's rarely used today and not supported in Chrome or Safari.

A modern way to create 'drop caps' (large first letters at the start of a paragraph). You can specify how many lines high the letter should be and how many lines it should sink into the text.

A logical property that sets the 'width' of an element relative to the direction of text. In horizontal languages (like English), it's exactly the same as 'width'.

A modern shorthand property that sets the distance between an element and its parent container. It's much faster than writing out 'top', 'right', 'bottom', and 'left' separately.

A logical shorthand for 'inset-block-start' and 'inset-block-end'. It defines an element's distance from the top and bottom of its container in one line.

A logical property that sets the distance from the 'end' of the block axis (usually the 'bottom' in English layouts). It's the logical replacement for 'bottom'.

A logical property that sets the distance from the 'start' of the block axis (usually the 'top' in English layouts). It's the logical replacement for 'top'.

A logical property that sets the distance from the 'end' of the inline axis (usually the 'right' in LTR or 'left' in RTL). It's the logical replacement for 'right'.

A logical property that sets the distance from the 'start' of the inline axis (usually the 'left' in LTR or 'right' in RTL). It's the logical replacement for 'left'.

An experimental property that can make an entire section of a page 'inert' (unclickable and ignored by assistive technology), similar to the 'inert' HTML attribute but via CSS.

Experimental shorthand for 'interest-delay-start' and 'interest-delay-end'. Controls the timing for appearing and disappearing 'interest' UI elements like tooltips.

Experimental: Part of the Interest API. Sets the delay before an 'interest' state (like a tooltip or hover-card) is dismissed after the user stops showing interest.

Experimental: Part of the Interest API. Sets the delay before an 'interest' state (like a tooltip or popover) appears after the user starts showing interest (e.g., hovering).

A game-changer for CSS transitions. It allows you to animate an element's size to or from keywords like 'auto', 'min-content', or 'max-content' smoothly.

Defines whether an element must create a new stacking context. This is useful for preventing mix-blend-mode or z-index from affecting elements outside of a specific container.

Sets the horizontal spacing (kerning) between characters in a block of text.

Specifies the color of the light source used in SVG filter primitives like <feDiffuseLighting> and <feSpecularLighting>.

Controls how strictly the browser should apply line-breaking rules, especially for CJK (Chinese, Japanese, Korean) languages where certain characters shouldn't start or end a line.

Limits the number of lines displayed in a block of text, automatically adding an ellipsis (...) at the end. It's the modern, non-prefixed way to do 'multiline truncation'.

Sets the height of a line box. It is commonly used to set the distance between lines of text, which significantly affects readability.

Sets the margin area on all four sides of an element. It creates space between an element and its neighbors.

A logical shorthand for 'margin-block-start' and 'margin-block-end'. It sets the vertical spacing (top and bottom) in one line.

A logical property that sets the margin at the 'end' of the block axis (usually the 'bottom' in English). It's the logical replacement for 'margin-bottom'.

A logical property that sets the margin at the 'start' of the block axis (usually the 'top' in English). It's the logical replacement for 'margin-top'.