MDN’s new design is in Beta! A sneak peek:

Creates a small separating gap between elements. This type of separator should be used to separate parts of a dialog. It doesn't draw a bar visually, but is just a small space. It is functionally equivalent to a spacer except it defaults to a small size (usually 1.5 ems).

Style classes
groove, groove-thin, thin


<separator class="groove-thin"/>


Type: one of the values below
Used to specify whether the separator is a horizontal or vertical separator. Note that the values are the reverse of what seems more likely.
The separator separates vertically placed elements.
The separator separates horizontally placed elements.

Inherited from XUL element
align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortDirection, sortResource, sortResource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width


Inherited Properties
align, attributes, allowEvents, baseURI, boxObject, builder, childElementCount, childNodes, children, className, clientHeight, clientLeft, clientTop, clientWidth, collapsed, contextMenu, controllers, database, datasources, dir, firstChild, firstElementChild, flex, height, hidden, id, lastChild, lastElementChild, left, localName, maxHeight, maxWidth, menu, minHeight, minWidth, namespaceURI, nextElementSibling, nextSibling, nodeName, nodeType, nodeValue, observes, ordinal, orient, ownerDocument, pack, parentNode, persist, prefix, previousElementSibling, previousSibling, ref, resource, scrollHeight, scrollLeft, scrollTop, scrollWidth, statusText, style, tagName,textContent, tooltip, tooltipText, top, width


Inherited Methods
addEventListener(), appendChild(), blur, click, cloneNode(), compareDocumentPosition, dispatchEvent(), doCommand, focus, getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getBoundingClientRect(), getClientRects(), getElementsByAttribute, getElementsByAttributeNS, getElementsByClassName(), getElementsByTagName(), getElementsByTagNameNS(), getFeature, getUserData, hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isDefaultNamespace(), isEqualNode, isSameNode, isSupported(), lookupNamespaceURI, lookupPrefix, normalize(), querySelector(), querySelectorAll(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS(), setUserData

Style classes

The following classes may be used to style the element. These classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme.

A grooved separator.
A thin grooved separator.
A thinner separator, which is usually 0.5 ems.

spacer, splitter, menuseparator, toolbarseparator, treeseparator.

Document Tags and Contributors

 Contributors to this page: Sheppy, Brettz9, mrolappe, Marsf, Mgjbot, Legege, Pmash, Ptak82, Dria
 Last updated by: Sheppy,