CSS Properties Lists

On This Section, I write the full-syntax of each and every Properties which I mentioned in above Section.

Box Model & Dimensions (Physical)

• width

• height

• min-width

• max-width

• min-height

• max-height

• margin

• margin-top

• margin-right

• margin-bottom

• margin-left

• padding

• padding-top

• padding-right

• padding-bottom

• padding-left

• aspect-ratio

• box-sizing

Box Model (Logical equivalents)

• inline-size

• block-size

• min-inline-size

• max-inline-size

• min-block-size

• max-block-size

• margin-inline

• margin-inline-start

• margin-inline-end

• margin-block

• margin-block-start

• margin-block-end

• padding-inline

• padding-inline-start

• padding-inline-end

• padding-block

• padding-block-start

• padding-block-end

Positioning & Insets

• position

• top

• right

• bottom

• left

• inset

• inset-block

• inset-block-start

• inset-block-end

• inset-inline

• inset-inline-start

• inset-inline-end

• z-index

• float

• clear

• vertical-align

Flexbox Layout

• display

• flex

• flex-basis

• flex-direction

• flex-flow

• flex-grow

• flex-shrink

• flex-wrap

• justify-content

• justify-items

• justify-self

• align-content

• align-items

• align-self

• order

• gap

• row-gap

• column-gap

Grid Layout

• grid

• grid-area

• grid-auto-columns

• grid-auto-flow

• grid-auto-rows

• grid-column

• grid-column-end

• grid-column-start

• grid-row

• grid-row-end

• grid-row-start

• grid-template

• grid-template-areas

• grid-template-columns

• grid-template-rows

• masonry-auto-flow (Experimental 2026)

Borders (Every Variant)

• border

• border-top

• border-right

• border-bottom

• border-left

• border-width

• border-top-width

• border-right-width

• border-bottom-width

• border-left-width

• border-style

• border-top-style

• border-right-style

• border-bottom-style

• border-left-style

• border-color

• border-top-color

• border-right-color

• border-bottom-color

• border-left-color

• border-radius

• border-top-left-radius

• border-top-right-radius

• border-bottom-right-radius

• border-bottom-left-radius

• border-start-start-radius

• border-start-end-radius

• border-end-start-radius

• border-end-end-radius

• border-image

• border-image-source

• border-image-slice

• border-image-width

• border-image-outset

• border-image-repeat

• border-block

• border-block-color

• border-block-style

• border-block-width

• border-inline

• border-inline-color

• border-inline-style

• border-inline-width

• border-collapse

• border-spacing

Typography (Text & Fonts)

• color

• font

• font-family

• font-size

• font-weight

• font-style

• font-variant

• font-stretch

• line-height

• font-size-adjust

• font-synthesis

• font-kerning

• font-variant-caps

• font-variant-numeric

• font-variant-ligatures

• font-variant-alternates

• font-variant-east-asian

• font-variant-position

• font-feature-settings

• font-variation-settings

• font-optical-sizing

• font-palette

• text-align

• text-align-last

• text-decoration

• text-decoration-line

• text-decoration-style

• text-decoration-color

• text-decoration-thickness

• text-underline-offset

• text-underline-position

• text-indent

• text-transform

• text-shadow

• text-overflow

• text-rendering

• text-orientation

• text-combine-upright

• text-justify

• text-emphasis

• text-emphasis-color

• text-emphasis-style

• text-emphasis-position

• text-wrap

• text-wrap-mode

• text-wrap-style

• letter-spacing

• word-spacing

• white-space

• white-space-collapse

• word-break

• word-wrap

• overflow-wrap

• hyphens

• hyphenate-character

• line-break

• writing-mode

• direction

• unicode-bidi

• tab-size

• hanging-punctuation

Backgrounds & Images

• background

• background-color

• background-image

• background-repeat

• background-attachment

• background-position

• background-position-x

• background-position-y

• background-clip

• background-origin

• background-size

• background-blend-mode

• object-fit

• object-position

• object-view-box

• image-orientation

• image-rendering

• image-resolution

Transitions, Animations & Scroll

• transition

• transition-property

• transition-duration

• transition-timing-function

• transition-delay

• transition-behavior

• animation

• animation-name

• animation-duration

• animation-timing-function

• animation-delay

• animation-iteration-count

• animation-direction

• animation-fill-mode

• animation-play-state

• animation-composition

• animation-timeline

• animation-range

• animation-range-start

• animation-range-end

• scroll-timeline

• scroll-timeline-name

• scroll-timeline-axis

• view-timeline

• view-timeline-name

• view-timeline-axis

• scroll-behavior

• scroll-margin

• scroll-padding

• scroll-snap-type

• scroll-snap-align

• scroll-snap-stop

• scrollbar-width

• scrollbar-color

• scrollbar-gutter

• overscroll-behavior

• overscroll-behavior-block

• overscroll-behavior-inline

Transforms-&-3D

• transform

• transform-origin

• transform-style

• perspective

• perspective-origin

• backface-visibility

• rotate

• scale

• translate

Masking, Clipping & Effects

• opacity

• visibility

• mix-blend-mode

• isolation

• filter

• backdrop-filter

• clip

• clip-path

• clip-rule

• mask

• mask-image

• mask-mode

• mask-repeat

• mask-position

• mask-clip

• mask-origin

• mask-size

• mask-composite

• mask-type

• box-shadow

Interactivity-&-User Interface

• appearance

• cursor

• caret-color

• caret-shape

• caret-animation

• accent-color

• color-scheme

• pointer-events

• touch-action

• user-select

• user-zoom

• resize

• outline

• outline-width

• outline-style

• outline-color

• outline-offset

• field-sizing (Auto-expanding textareas)

Multi-Column & Tables

• columns

• column-count

• column-width

• column-fill

• column-rule

• column-rule-width

• column-rule-style

• column-rule-color

• column-span

• table-layout

• caption-side

• empty-cells

Modern Containers & Anchor Positioning

• container

• container-type

• container-name

• anchor-name

• position-anchor

• position-area

• position-try

• position-try-options

• position-try-order

• overlay

SVG-Specific Properties (Valid-in-CSS)

• fill

• fill-opacity

• fill-rule

• stroke

• stroke-width

• stroke-linecap

• stroke-linejoin

• stroke-dasharray

• stroke-dashoffset

• stroke-opacity

• stroke-miterlimit

• marker

• marker-start

• marker-mid

• marker-end

• stop-color

• stop-opacity

• flood-color

• flood-opacity

• lighting-color

• shape-rendering

• color-interpolation

• dominant-baseline

• alignment-baseline

• vector-effect

Paged Media (Printing)

• break-after

• break-before

• break-inside

• orphans

• widows

• page-break-after

• page-break-before

• page-break-inside

• page

• size

• Border Color Logical: border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color.

• Border Style Logical: border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style.

• Border Width Logical: border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width.

• Repeated for: margin, padding, inset, max-width, min-width, and border-radius.

The Properties of all direction (top, bottom, left, right, block-start, block-end, inline-start, inline-end) for every box-model property.

State-Aware Queries (@container scroll-state)

This is the single biggest addition in 2026. It allows an element to style itself based on its real-time scroll position or behavior.

• stuck: Detects if a position: sticky element is currently pinned.

• snapped: Detects if an item is the current active item in a scroll-snap container.

• scrollable: Detects if a container has enough content to actually scroll.

Demonstration:

/* Styling a header ONLY when it sticks to the top */
@container scroll-state(stuck: top) {
  .nav-bar {
    background: white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    height: 60px; /* Shrink on scroll */
  }
}

Sibling Counting Functions

These properties allow you to style elements based on their position or the total count of siblings without using hardcoded :nth-child rules.

• sibling-index(): Returns the number (1, 2, 3...) of the element.

• sibling-count(): Returns the total number of siblings in that parent.

Demonstration (Auto-staggered Animation):

li {
  /* Every list item delays itself by 0.1s times its index */
  transition-delay: calc(sibling-index() * 0.1s);
}

Native Carousels & Scroll Markers

CSS has finally introduced "pseudo-elements" specifically for carousels, removing the need for 3rd-party slider libraries.

• ::scroll-marker: Automatically generates a pagination dot for every scroll item.

• ::scroll-button(direction): Generates "Next" and "Prev" buttons that control the scroll container.

• scroll-target-group: Groups markers together for styling.

Demonstration:

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

/* Create the pagination dots automatically */
.carousel::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 10px;
}

Advanced Visuals: Shapes & Trimming

• corner-shape: Allows for "beveled" or "scooped" corners instead of just rounded ones.

• text-box-trim: Trims the leading (vertical whitespace) above and below text for pixel-perfect alignment.

• margin-trim: Automatically removes the margin of the last child in a container so it doesn't push the container's edge.

Demonstration (Beveled Corners):

.button {
  border-radius: 20px;
  corner-shape: bevel; /* Instead of rounded, it's a flat diagonal cut */
}

Conditional Functional Logic (if())

This is the "Logic" property. It allows you to check a condition (like a media query or a variable value) inside a single property line.

Demonstration:

.card {
  /* Set color to blue if screen is wide, otherwise red */
  background: if(media(min-width: 1000px): blue; else: red);
  
  /* Use a custom variable to toggle styles */
  padding: if(style(--size: big): 40px; else: 10px);
}

The "Complete" Property-Count

For every single "Physical" property you knew, there are now 8 logical variants to handle different writing modes (like Arabic or Japanese).