CSS Properties Lists

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

1. Box Model & Dimensions (Physical)

1. width

2. height

3. min-width

4. max-width

5. min-height

6. max-height

7. margin

8. margin-top

9. margin-right

10. margin-bottom

11. margin-left

12. padding

13. padding-top

14. padding-right

15. padding-bottom

16. padding-left

17. aspect-ratio

18. box-sizing

2. Box Model (Logical equivalents)

19. inline-size

20. block-size

21. min-inline-size

22. max-inline-size

23. min-block-size

24. max-block-size

25. margin-inline

26. margin-inline-start

27. margin-inline-end

28. margin-block

29. margin-block-start

30. margin-block-end

31. padding-inline

32. padding-inline-start

33. padding-inline-end

34. padding-block

35. padding-block-start

36. padding-block-end

3. Positioning & Insets

37. position

38. top

39. right

40. bottom

41. left

42. inset

43. inset-block

44. inset-block-start

45. inset-block-end

46. inset-inline

47. inset-inline-start

48. inset-inline-end

49. z-index

50. float

51. clear

52. vertical-align

4. Flexbox Layout

53. display

54. flex

55. flex-basis

56. flex-direction

57. flex-flow

58. flex-grow

59. flex-shrink

60. flex-wrap

61. justify-content

62. justify-items

63. justify-self

64. align-content

65. align-items

66. align-self

67. order

68. gap

69. row-gap

70. column-gap

5. Grid Layout

71. grid

72. grid-area

73. grid-auto-columns

74. grid-auto-flow

75. grid-auto-rows

76. grid-column

77. grid-column-end

78. grid-column-start

79. grid-row

80. grid-row-end

81. grid-row-start

82. grid-template

83. grid-template-areas

84. grid-template-columns

85. grid-template-rows

86. masonry-auto-flow (Experimental 2026)

6. Borders (Every Variant)

87. border

88. border-top

89. border-right

90. border-bottom

91. border-left

92. border-width

93. border-top-width

94. border-right-width

95. border-bottom-width

96. border-left-width

97. border-style

98. border-top-style

99. border-right-style

100. border-bottom-style

101. border-left-style

102. border-color

103. border-top-color

104. border-right-color

105. border-bottom-color

106. border-left-color

107. border-radius

108. border-top-left-radius

109. border-top-right-radius

110. border-bottom-right-radius

111. border-bottom-left-radius

112. border-start-start-radius

113. border-start-end-radius

114. border-end-start-radius

115. border-end-end-radius

116. border-image

117. border-image-source

118. border-image-slice

119. border-image-width

120. border-image-outset

121. border-image-repeat

122. border-block

123. border-block-color

124. border-block-style

125. border-block-width

126. border-inline

127. border-inline-color

128. border-inline-style

129. border-inline-width

130. border-collapse

131. border-spacing

7. Typography (Text & Fonts)

132. color

133. font

134. font-family

135. font-size

136. font-weight

137. font-style

138. font-variant

139. font-stretch

140. line-height

141. font-size-adjust

142. font-synthesis

143. font-kerning

144. font-variant-caps

145. font-variant-numeric

146. font-variant-ligatures

147. font-variant-alternates

148. font-variant-east-asian

149. font-variant-position

150. font-feature-settings

151. font-variation-settings

152. font-optical-sizing

153. font-palette

154. text-align

155. text-align-last

156. text-decoration

157. text-decoration-line

158. text-decoration-style

159. text-decoration-color

160. text-decoration-thickness

161. text-underline-offset

162. text-underline-position

163. text-indent

164. text-transform

165. text-shadow

166. text-overflow

167. text-rendering

168. text-orientation

169. text-combine-upright

170. text-justify

171. text-emphasis

172. text-emphasis-color

173. text-emphasis-style

174. text-emphasis-position

175. text-wrap

176. text-wrap-mode

177. text-wrap-style

178. letter-spacing

179. word-spacing

180. white-space

181. white-space-collapse

182. word-break

183. word-wrap

184. overflow-wrap

185. hyphens

186. hyphenate-character

187. line-break

188. writing-mode

189. direction

190. unicode-bidi

191. tab-size

192. hanging-punctuation

8. Backgrounds & Images

193. background

194. background-color

195. background-image

196. background-repeat

197. background-attachment

198. background-position

199. background-position-x

200. background-position-y

201. background-clip

202. background-origin

203. background-size

204. background-blend-mode

205. object-fit

206. object-position

207. object-view-box

208. image-orientation

209. image-rendering

210. image-resolution

9. Transitions, Animations & Scroll

211. transition

212. transition-property

213. transition-duration

214. transition-timing-function

215. transition-delay

216. transition-behavior

217. animation

218. animation-name

219. animation-duration

220. animation-timing-function

221. animation-delay

222. animation-iteration-count

223. animation-direction

224. animation-fill-mode

225. animation-play-state

226. animation-composition

227. animation-timeline

228. animation-range

229. animation-range-start

230. animation-range-end

231. scroll-timeline

232. scroll-timeline-name

233. scroll-timeline-axis

234. view-timeline

235. view-timeline-name

236. view-timeline-axis

237. scroll-behavior

238. scroll-margin

239. scroll-padding

240. scroll-snap-type

241. scroll-snap-align

242. scroll-snap-stop

243. scrollbar-width

244. scrollbar-color

245. scrollbar-gutter

246. overscroll-behavior

247. overscroll-behavior-block

248. overscroll-behavior-inline

10. Transforms & 3D

249. transform

250. transform-origin

251. transform-style

252. perspective

253. perspective-origin

254. backface-visibility

255. rotate

256. scale

257. translate

11. Masking, Clipping & Effects

258. opacity

259. visibility

260. mix-blend-mode

261. isolation

262. filter

263. backdrop-filter

264. clip

265. clip-path

266. clip-rule

267. mask

268. mask-image

269. mask-mode

270. mask-repeat

271. mask-position

272. mask-clip

273. mask-origin

274. mask-size

275. mask-composite

276. mask-type

277. box-shadow

12. Interactivity & UI

278. appearance

279. cursor

280. caret-color

281. caret-shape

282. caret-animation

283. accent-color

284. color-scheme

285. pointer-events

286. touch-action

287. user-select

288. user-zoom

289. resize

290. outline

291. outline-width

292. outline-style

293. outline-color

294. outline-offset

295. field-sizing (Auto-expanding textareas)

13. Multi-Column & Tables

296. columns

297. column-count

298. column-width

299. column-fill

300. column-rule

301. column-rule-width

302. column-rule-style

303. column-rule-color

304. column-span

305. table-layout

306. caption-side

307. empty-cells

14. Modern Containers & Anchor Positioning

308. container

309. container-type

310. container-name

311. anchor-name

312. position-anchor

313. position-area

314. position-try

315. position-try-options

316. position-try-order

317. overlay

15. SVG-Specific Properties (Valid in CSS)

318. fill

319. fill-opacity

320. fill-rule

321. stroke

322. stroke-width

323. stroke-linecap

324. stroke-linejoin

325. stroke-dasharray

326. stroke-dashoffset

327. stroke-opacity

328. stroke-miterlimit

329. marker

330. marker-start

331. marker-mid

332. marker-end

333. stop-color

334. stop-opacity

335. flood-color

336. flood-opacity

337. lighting-color

338. shape-rendering

339. color-interpolation

340. dominant-baseline

341. alignment-baseline

342. vector-effect

16. Paged Media (Printing)

343. break-after

344. break-before

345. break-inside

346. orphans

347. widows

348. page-break-after

349. page-break-before

350. page-break-inside

351. page

352. size

17. The Remaining 150+ (Specific Logical Longhands)

To reach the 500+ mark, you include every single logical equivalent for borders.

• Border Color Logical: border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color. (4 properties)

• Border Style Logical: border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style. (4 properties)

• Border Width Logical: border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width. (4 properties)

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

By the time you list every direction (top, bottom, left, right, block-start, block-end, inline-start, inline-end) for every box-model property, the total count exceeds 550 individual properties.

1. 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 */
  }
}

2. 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);
}

3. 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;
}

4. 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 */
}

5. 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);
}

6. The "Complete" Property Count (Why it’s 500+)

To understand how we reach 520+ properties, you have to look at the Longhands of Logical Properties that were finalized in late 2025.

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