Hubspot-Inspired Guide to Mastering CSS Borders

Designers who work with Hubspot-style pages often need clean, flexible borders that look great on any layout. In this guide, you will learn how to control every aspect of a CSS border, from basic lines to advanced outlines, using clear, reusable patterns that match modern Hubspot design standards.

This tutorial is based on the techniques demonstrated in the official CSS border article at Hubspot’s web design blog, adapted into a practical how‑to reference.

Hubspot Basics: What Is a CSS Border?

A CSS border is a line drawn around the padding and content of an element. You can change its width, style, and color, or remove it completely. Getting this right is essential for cards, forms, buttons, and calls-to-action on a Hubspot themed site.

The core border properties are:

border-width – thickness of the border
border-style – visual style of the line
border-color – color of the border

You can define these individually or with the shorthand border property.

Core Syntax Used on Hubspot Pages

The shorthand syntax lets you write compact, readable CSS similar to what you see on many Hubspot templates:

.box {
  border: 2px solid #333;
}

The order inside the shorthand is not strict, but a common pattern is:

Border width (e.g., 2px)
Border style (e.g., solid)
Border color (e.g., #333 or blue)

To remove a border entirely, set the style to none:

.box {
  border: none;
}

Hubspot-Friendly Border Styles

CSS supports multiple line styles that can match a wide range of Hubspot layouts.

Common Border Styles

solid – a single continuous line
dotted – round dots separated by small gaps
dashed – rectangular dashes with gaps
double – two solid lines with space between
groove – 3D grooved effect
ridge – 3D ridged effect
inset – makes the element appear embedded
outset – makes the element appear raised

.card-solid {
  border: 2px solid #1a1a1a;
}

.card-dotted {
  border: 3px dotted #0073e6;
}

.card-dashed {
  border: 3px dashed #ff6600;
}

These options allow you to highlight sections, create subtle dividers, or build decorative elements that fit neatly into a Hubspot landing page.

Controlling Individual Sides Like a Hubspot Pro

Often you only want a border on one or two sides, such as a top border under headings commonly seen in Hubspot layouts.

Single-Side Borders

Use the side-specific properties:

border-top
border-right
border-bottom
border-left

h2.section-title {
  border-bottom: 4px solid #0b5fff;
  padding-bottom: 0.5rem;
}

You can also break each side into width, style, and color if you need more control:

.box {
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: #333;
}

Different Borders on Each Side

To mix styles on each side, apply them individually:

.multi-border {
  border-top: 4px solid #0b5fff;
  border-right: 4px dashed #ff6600;
  border-bottom: 4px solid #0b5fff;
  border-left: 4px dashed #ff6600;
}

This approach is useful for highlighting cards or banners in a Hubspot-styled interface.

Adding Border Radius for Hubspot-Style Cards

Rounded corners are a staple of modern UI design and are heavily used in Hubspot themed modules. Use border-radius to round one or all corners.

Basic Rounded Corners

.rounded-card {
  border: 1px solid #ddd;
  border-radius: 8px;
}

To create a pill-shaped element, increase the radius:

.pill-button {
  border: 2px solid #0b5fff;
  border-radius: 999px;
}

Different Radius per Corner

You can specify up to four values for border-radius in this order: top-left, top-right, bottom-right, bottom-left.

.ticket {
  border: 1px solid #ccc;
  border-radius: 16px 16px 0 0;
}

Or use corner-specific properties:

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

Hubspot Form Borders and Input Focus

Form styling is a big part of any Hubspot build. Clean borders help users understand where to click and type.

Default Input Borders

input[type="text"],
textarea {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.5rem;
}

Focus States for Better UX

Use :focus to change the border when the user interacts with the field:

input[type="text"]:focus,
textarea:focus {
  border-color: #0b5fff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(11, 95, 255, 0.2);
}

This pattern is common in modern Hubspot forms to keep accessibility and clarity high.

Outlines vs Borders in Hubspot Layouts

While borders affect layout and take up space, outlines do not. They sit outside the element’s box and are often used to highlight focus states or errors in a Hubspot form.

Key Differences

Border is part of the box model and changes the element’s size.
Outline does not affect size or layout.
Outlines can be non-rectangular and follow the border radius in many browsers.

Outline Example

.focus-outline {
  border: 1px solid transparent;
  outline: 2px solid #0b5fff;
}

This is especially useful for keyboard accessibility, and is a best practice when building Hubspot compatible themes.

Step-by-Step: Building a Hubspot-Style Card with CSS Borders

Follow these steps to create a reusable card component that would look at home in a Hubspot layout.

Step 1: Define the Container

.hs-card {
  padding: 1.5rem;
  margin: 1rem 0;
  background-color: #ffffff;
}

Step 2: Add a Clean Border

.hs-card {
  padding: 1.5rem;
  margin: 1rem 0;
  background-color: #ffffff;
  border: 1px solid #e2e4ea;
}

Step 3: Soften with Border Radius

.hs-card {
  padding: 1.5rem;
  margin: 1rem 0;
  background-color: #ffffff;
  border: 1px solid #e2e4ea;
  border-radius: 10px;
}

Step 4: Highlight on Hover

.hs-card:hover {
  border-color: #0b5fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

With these steps, you have a flexible card design that can be reused across your Hubspot landing pages or blog layouts.

Where to Learn More Beyond Hubspot

The techniques summarized here are adapted from the original tutorial on the official blog. You can see every example and extended explanation directly on the Hubspot CSS border article.

If you need help implementing these patterns in a full marketing or CRM stack, including Hubspot integration, you can explore implementation and strategy resources at Consultevo.

By mastering CSS borders and outlines, you can build interfaces that look polished, perform well, and match the expectations users have when they interact with a Hubspot-quality experience.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`

Hupspot Guide to CSS Borders