Rounded Pill Newsletter Form

Code Toolkit
Written By Squarestylist Support

What You'll Create

A modern pill-shaped newsletter signup form with rounded input field flowing into a rounded button, creating a sleek continuous capsule shape.

The Problem It Solves

Squarespace's default newsletter blocks look boxy and dated. This technique creates a polished, modern newsletter form that looks like a single unified element rather than separate input and button components.

Perfect For

Modern brand aesthetics, Footer signups, Minimalist designs, SaaS sites, Contemporary portfolios, Landing pages.

What Makes This Different

CSS border-radius creates rounded ends on both the input field and button, with negative margin pulling them together visually. The rounded corners are asymmetric - curved on outer edges, straight where elements meet - creating a seamless capsule shape.

Details

  • Section Type: Classic

  • Code Type: CSS

  • Prerequisites: Newsletter block added to page

  • Toolkit Title: Rounded Newsletter Block

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

  • The complete, copy-paste code

  • Video walkthrough explaining how it works

  • The principles behind the technique so you can customize it

  • Access to our private community for support

Get Access to Standout Squarespace →
Squarestylist Support
Previous

Custom Social Media Icons
Next

Grid Gallery Hover Overlay