Where to find line color settings in Squarespace

Line color in Squarespace is controlled through the Design panel, not through a single universal setting. The location depends on what kind of line you're changing: a divider line between sections, a border around a block, a line in a gallery, or a line in a custom code element. Most lines are edited by selecting the block or section that contains them, then opening the Design tab on the right side of the editor.

The fastest way to find a specific line is to click directly on it in the editor. Squarespace will highlight the element it belongs to and open the relevant panel. If clicking the line doesn't select it, try clicking the section or block that contains it, then look for a "Dividers" or "Borders" option in the Design panel.

Key Takeaways

  • Most line colors are changed through the Design panel after selecting the section or block containing the line.
  • Divider lines between sections have their own Dividers menu, separate from block borders.
  • Gallery blocks, image blocks, and text blocks each have different places to adjust line color.
  • Custom code and embed blocks may not expose line color controls in the visual editor and require direct code editing.

Changing divider lines between sections

Divider lines that sit between full-width sections are edited at the section level. Click on the section above or below the divider line, then open the Design tab on the right. Scroll down until you see "Dividers" or "Section Dividers." Click that option to expand it.

You'll see controls for the divider style (solid, dashed, dotted), thickness, and color. The color picker appears as a square or circle. Click it to open the color menu, where you can choose from your site's color palette or enter a custom hex code. Some dividers also have opacity controls, which let you make the line more or less transparent.

Changing borders on blocks and containers

Borders around individual blocks—like text boxes, image blocks, or button groups—are edited through the block's Design panel. Select the block by clicking on it, then open the Design tab. Look for "Border" or "Borders" in the menu.

Click to expand the border section. You'll see options for border style (solid, dashed, dotted, double), width (thickness in pixels), and color. The color control works the same way as dividers: click the color square to choose from your palette or enter a hex code. You can usually set different border styles for each side of the block, or apply the same border to all sides at once.

Changing lines in gallery and image blocks

Gallery blocks and image blocks sometimes display lines or borders around thumbnails or between images. Select the gallery or image block, open Design, and look for "Gallery Settings," "Image Settings," or "Borders." The exact label depends on your Squarespace template.

If you see a border or line option, click it to reveal color, style, and width controls. Not all gallery templates expose these controls visually; some require you to edit the block's custom CSS. If you don't see a border option in the Design panel, the line color may be locked into the template design and cannot be changed without code.

Changing lines in tables and structured content

Tables, pricing tables, and other structured content blocks display grid lines between cells. Select the table block and open Design. Look for "Table Settings," "Grid," or "Lines." Click to expand and you'll usually find controls for line color, thickness, and sometimes whether lines appear between rows, columns, or both.

Some templates let you set different colors for header rows versus data rows. If the table is part of a custom code block or embed, you'll need to edit the HTML or CSS directly, as the visual Design panel won't expose these controls.

Changing lines in custom code and embeds

If a line is part of a custom code block, an embed, or an HTML element you've added, you'll need to edit the code itself. The Design panel won't show color controls for these elements. Open the code block, find the CSS rule that controls the line (usually a border, border-top, or stroke property), and change the color value.

Color values in code can be written as hex codes (#FF0000), RGB values (rgb(255, 0, 0)), or color names (red). If you're not comfortable editing code, consider replacing the custom element with a standard Squarespace block that has a visual Design panel.

Troubleshooting line color changes that don't appear

If you change a line color and it doesn't show up on your live site, the most common cause is browser cache. Clear your browser cache or open your site in an incognito window to see the change immediately. If the line still doesn't change, check whether the line color is being overridden by CSS in your site's custom CSS panel or by a template rule.

Another possibility is that the line is part of a template style that can't be changed through the Design panel. Try selecting the element and looking for an "Override" or "Custom" option in the Design tab. If none appears, the line may be locked to the template and you'll need to use custom CSS to change it. Open your site settings, go to Custom CSS, and add a rule targeting the element's class or ID.

Frequently Asked Questions

Can I change the color of lines in my navigation menu?

Navigation menu lines are usually part of the site header template and are controlled through Site Styles, not through individual block Design panels. Go to Design > Site Styles, find the Header section, and look for border or line color options there. Changes made in Site Styles apply to your entire site.

What if the Design panel doesn't show a color option for the line I want to change?

The line may be part of a template element that doesn't expose color controls visually. Try adding custom CSS to target it. Go to Settings > Custom CSS and write a rule like border-color: #yourcolorcode; targeting the element's class. If you don't know the class name, use your browser's inspect tool to find it.

Can I make a line transparent or remove it entirely?

Yes. In the Design panel, look for an opacity slider or set the color to transparent. Alternatively, set the border width to 0 pixels to remove the line completely. Some dividers have a "None" style option that removes the line without deleting the divider space.

Do line color changes appear on mobile devices?

Yes, line color changes apply to all devices. However, some templates hide or resize lines on mobile to save space. If a line disappears on mobile but appears on desktop, that's a template choice, not a color issue. You can override this behavior with custom CSS if needed.