Separators are visual elements that break apart or contain space, i.e., rules between objects or outlines on objects.
Controls are a subset of UI components that facilitate interaction within the application, i.e., Secondary Buttons, Button Groups and the Search Field. Control borders are used to outline these components and are not intended for use as separators.
Layered components – Dialog, Modal, Notifications, and Popover – only use containers with white backgrounds. Therefore, layered components only have one border variable that works across all backgrounds.
Header borders establish a clear hierarchy of content on a page by offering three variations: Primary, Secondary, and Tertiary. Use these variations to create a legible visual architecture which clearly communicates the organization of information.