Does Webflow have a <code><hr></code> feature available?
TL;DR
- Use a styled Div Block with fixed height, full width, and background color to mimic an
<hr>. - Alternatively, use an Embed element with
<hr>tag and style it via custom CSS in Project or Page settings.
Webflow does not have a dedicated <hr> (horizontal rule) element in the Add Elements panel, but you can still create a similar visual divider easily.
1. Use a Styled Div Block as an <hr>
- Add a Div Block from the Elements panel.
- Set a fixed height (e.g., 1–2px) and 100% width.
- Apply a background color (e.g., light gray or black).
- Optionally set margin top and bottom to add spacing.
- This creates a visual line similar to an
<hr>.
2. Add a Custom <hr> Element (if needed)
- Webflow does not include an HTML
<hr>element in the visual editor. - However, you can insert it via an Embed element.
- Drag in an Embed from the Elements panel and enter:
<hr>. - Style control is limited—you’ll need to target the
<hr>tag in custom code or CSS for styling.
3. Style the <hr> Tag Globally (Optional)
- In Project Settings > Custom Code, you can add global CSS like:
hr { border: none; height: 1px; background: #ccc; margin: 2rem 0; }
- Or use the Page settings > Inside <head> area for per-page styles.
Summary
Webflow doesn’t have a built-in <hr> element, but you can easily recreate it using a styled Div Block or insert a raw <hr> using the Embed element with custom CSS for styling.
