About

DOM style properties in JavaScript use camelCase notation (borderRadius, backgroundColor) while CSS uses hyphenated kebab-case (border-radius, background-color). Vendor-prefixed properties add a layer of complexity: webkitTransform in the DOM maps to -webkit-transform in CSS, where the leading hyphen is critical for browser parsing. Getting this conversion wrong in dynamic style manipulation or CSS-in-JS tooling causes silent failures. Properties simply do not apply and no error is thrown.

This tool performs the exact bidirectional mapping algorithm used by libraries like css-name. It handles standard properties, multi-word compounds, and all four vendor prefixes (webkit, moz, ms, o). Batch mode accepts multiple property names at once. Note: this tool converts naming conventions only. It does not validate whether a property actually exists in any browser's CSS engine.

Formulas

The DOM-to-CSS conversion algorithm operates on a character-by-character basis with vendor prefix detection.

domToCSS(name) → result

Step 1: Detect vendor prefix. Check if name starts with a known prefix p ∈ {webkit, moz, ms, o} followed by an uppercase character C where C ∈ [A - Z]. If matched, prepend - to form -prefix-.

Step 2: Convert camelCase. For each character c_i in the remaining string, if c_i is uppercase: emit - + toLowerCase(c_i). Otherwise emit c_i unchanged.

Step 3: Handle special cases. Map cssFloat → float directly.

The reverse conversion (cssToDOM) splits by -, detects a leading empty segment (indicating a vendor prefix), and capitalizes the first letter of each subsequent segment.

cssToDOM(name) → result

Split name by - → parts[]

If parts[0] = "" (leading hyphen), the vendor prefix is parts[1]. Concatenate remaining parts with first-letter capitalization.

Where name is the input string. Time complexity is O(n) where n is string length.

Reference Data

DOM Style (JS)	CSS Property	Type
border	border	Standard
borderRadius	border-radius	Standard
backgroundColor	background-color	Standard
marginTop	margin-top	Standard
paddingLeft	padding-left	Standard
fontSize	font-size	Standard
lineHeight	line-height	Standard
textDecoration	text-decoration	Standard
boxShadow	box-shadow	Standard
zIndex	z-index	Standard
maxWidth	max-width	Standard
minHeight	min-height	Standard
flexDirection	flex-direction	Standard
alignItems	align-items	Standard
justifyContent	justify-content	Standard
gridTemplateColumns	grid-template-columns	Standard
overflowX	overflow-x	Standard
webkitTransform	-webkit-transform	Vendor (WebKit)
webkitAnimationDuration	-webkit-animation-duration	Vendor (WebKit)
webkitBackfaceVisibility	-webkit-backface-visibility	Vendor (WebKit)
mozTransform	-moz-transform	Vendor (Mozilla)
mozAppearance	-moz-appearance	Vendor (Mozilla)
msTransform	-ms-transform	Vendor (Microsoft)
msFlexAlign	-ms-flex-align	Vendor (Microsoft)
oTransition	-o-transition	Vendor (Opera)
cssFloat	float	Special case
borderTopLeftRadius	border-top-left-radius	Compound
transitionTimingFunction	transition-timing-function	Compound
animationIterationCount	animation-iteration-count	Compound
webkitOverflowScrolling	-webkit-overflow-scrolling	Vendor (WebKit)

Frequently Asked Questions

The algorithm checks if the input string begins with a known vendor prefix (webkit, moz, ms, o) immediately followed by an uppercase letter. When detected, it prepends a hyphen to create the CSS vendor prefix form: webkitTransform becomes -webkit-transform. The ms prefix is notable because Internet Explorer's DOM properties use lowercase ms (not Ms), unlike WebKit which uses webkit in the DOM but -webkit- in CSS.

In JavaScript, float is a reserved-adjacent word that historically caused issues in older engines. The DOM uses cssFloat instead. This converter maps cssFloat directly to float and vice versa. This is a hardcoded exception because no algorithmic camelCase-to-kebab conversion produces the correct result.

Yes. Enter one property per line or separate them with commas. The batch mode processes each name independently and outputs the results in the same order. This is useful when migrating inline styles from JavaScript objects to CSS stylesheets or vice versa.

The reverse algorithm splits the CSS name by hyphens. A leading hyphen (empty first segment) signals a vendor prefix. For example, -webkit-transform splits into ["", "webkit", "transform"], yielding webkitTransform. Standard properties like border-radius split into ["border", "radius"], yielding borderRadius. The special case float maps back to cssFloat.

All vendor prefixes in the DOM are lowercase in their prefix portion. The distinction is that Microsoft chose ms (no capitalization) while WebKit uses webkit. In CSS, both get a leading hyphen: -ms-transform and -webkit-transform. The algorithm treats all four prefixes identically: detect the lowercase prefix, confirm the next character is uppercase, then insert -prefix-.

If the input contains hyphens and no uppercase letters, the DOM-to-CSS direction returns it unchanged since there are no uppercase letters to convert. For best results, use the CSS-to-DOM direction instead, which will properly camelCase it. The tool auto-detects direction hints but you can also manually toggle the conversion direction.