Does Webflow have a <code><hr></code> feature available?
TL;DR
- Use a 1px high Div Block with 100% width and background color to mimic an
<hr>line. - Alternatively, apply a top or bottom border to a Spacer or Div Block for the same effect.
Webflow does not have a dedicated <hr> (horizontal rule) element block, but you can easily create the same effect using other built-in tools.
1. Use a Divider Element with Styling
- Drag a Div Block from the Add panel into your layout.
- Set the Div’s height to
1pxand width to100%(or your desired width). - Apply a background color (typically black or gray) to make it visible.
- Optionally, add margins or padding above/below to control spacing.
2. Use a Border on Another Element
- Place a Spacer or Div Block where you want the line.
- Go to the Style panel, and under Borders, add a top or bottom border.
- Set the width, color, and style (e.g., solid, dashed) to match the desired line style.
3. Embed Custom HTML (Optional)
- Although not recommended unless necessary, you can use an Embed element and insert
<hr>directly. - Keep in mind that styling this will require custom CSS under the Page Settings or in the
<style>tag inside the Embed.
Summary
Webflow doesn’t have a native <hr> element, but you can recreate it visually using a 1px high Div Block or by applying a border to an element. The visual result is the same, with full control via the Designer.