CSS Border

button {
  border: 2px solid white;
}

input {
  border: 2px solid #cccccc;
}

Let me ask you something.

Have you ever seen a card on a website with a clean thin line around it? Or an input field with a subtle border that turns a different color when you click it? Or a section with a bold line on the left side making it stand out?

All of that is border. It is one of those properties that seems simple on the surface but gives you a surprising amount of creative control once you know how to use it.

What is a Border

A border is a line that goes around the outside of an element. It sits between the padding and the margin.

In CSS you set a border using three things together — the width, the style, and the color.

The button now has a 2px solid white border around it.

Let us break that down.

• 2px — how thick the border is
• solid — the style of the line
• white — the color of the border

All three values go together in one line separated by spaces. This is the shorthand and it is what you will use almost every time.

Border Styles

The style is what controls what the line actually looks like. There are several options.

Four different styles, four very different looks. In real projects you will use solid almost exclusively. Dashed and dotted occasionally for things like dividers or upload zones. Double almost never.

Border on Individual Sides

You can put a border on just one side of an element instead of all four. This is really useful for creating subtle dividers or left-side accent lines.

That left border on the second paragraph is a pattern you will see everywhere in modern design. A thick colored line on the left side of a block of text creates a clean visual accent that draws the eye without being heavy handed.

Border Color

You can set the border color separately if you want to change just the color without touching the other values.

First we set the full border then we override just the color. You will use this pattern when you want to change the border color on hover or focus — which we will cover in the pseudo-classes lesson.

Removing a Border

Sometimes you want to remove a border completely. The most common case is removing the default border that browsers put on input fields and buttons.

Clean. No border at all. You will use border: none constantly on buttons and inputs when you want to style them from scratch without fighting the browser defaults.

Border Width

You can also set the border width separately using border-width. It works exactly like padding and margin — one value for all sides or up to four values for each side individually.

Thin border on three sides and a thick border on the bottom. That asymmetry creates a subtle but interesting visual effect.

Building the Netflix Clone

Let us add some borders to our Netflix clone. The input field needs a border and we should style the Sign In button differently from the Get Started button — one filled and one outlined.

The Get Started button is solid red with no border. The Sign In button is transparent with a white outline border — a classic ghost button style used everywhere in modern design. The input field has a clean subtle border. Everything feels intentional and designed.