Border Properties: Width, Style, and Color

When you visit a website, you often see boxes around images, menus, or buttons. Those outlines are called borders, and you can control how they look with just a few lines of CSS.

In this article, you’ll learn three core border properties:

border-width – how thick the border is
border-style – the pattern or look of the border
border-color – the color of the border

You don’t need any coding experience. We’ll walk step-by-step, use clear examples, and explain everything in simple language.

Getting Set Up (Super Simple)

To follow along, you only need a web browser (like Chrome, Firefox, or Edge) and a simple text editor (like Notepad, VS Code, or any plain text editor).

Create a new file on your computer called borders.html.
Open it in your text editor.
Paste this basic starter code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Border Practice</title>
  <style>
    /* We'll add border styles here soon */
  </style>
</head>
<body>
  <h1>Border Practice</h1>
  <div class="box">Hello borders!</div>
</body>
</html>

Save the file.
Double-click the file to open it in your browser.

You should see a heading that says “Border Practice” and some text that says “Hello borders!”. Now we’re ready to style it.

Step 1: Border Width – How Thick is the Line?

The border width controls how thick the border appears around an element (like a div or a button).

You can set the width in different ways:

Using words: thin, medium, thick
Using units: px (pixels), like 1px, 3px, 10px

Add this CSS inside the <style> tag in your file:

.box {
  border-width: 3px;   /* thickness of the border */
  border-style: solid; /* needed for the border to show */
  border-color: black; /* border color */
  padding: 10px;       /* space inside the box */
}

Your <style> section should now look like this:

<style>
  .box {
    border-width: 3px;
    border-style: solid;
    border-color: black;
    padding: 10px;
  }
</style>

Save the file and refresh your browser.

You should now see a black rectangle around “Hello borders!”. That’s your first CSS border.

Try it yourself: change the width

Change border-width: 3px; to:

border-width: 10px;

Save and refresh. Notice how the border gets thicker.

You can also try:

border-width: thin;   /* or medium, or thick */

Observe how each keyword changes the thickness.

Step 2: Border Style – What Does the Line Look Like?

The border style controls the pattern of the border. Without a border style, the border won’t show up, even if you have a width and color.

Common border styles include:

solid – a single straight line
dashed – a series of short dashes
dotted – a series of small dots
double – two straight lines

Let’s experiment with different styles. Add a second box to your HTML body:

<body>
  <h1>Border Practice</h1>
  <div class="box">Hello borders!</div>

  <!-- New box with a different class -->
  <div class="box-dashed">I have a dashed border!</div>
</body>

Now add styles for .box-dashed:

.box-dashed {
  border-width: 3px;      /* thickness of the border */
  border-style: dashed;   /* dashed line */
  border-color: blue;     /* blue border */
  padding: 10px;          /* space inside the box */
  margin-top: 10px;       /* space above this box */
}

Your page will now show two boxes: one with a solid black border and one with a dashed blue border.

Try it yourself: test other styles

Change border-style: dashed; to:

border-style: dotted;

Then try:

border-style: double;

Note how the look of the border changes each time. This is an easy way to make different parts of your page stand out.

Step 3: Border Color – Make It Pop

The border color controls the color of the line around your element.

You can set colors in several ways:

By name: red, blue, green, black, etc.
By hex code: #ff0000 (red), #00ff00 (green), etc.
By RGB: rgb(255, 0, 0) for red

Let’s create a new box with a different color and style. Add this HTML under your other boxes:

<div class="box-colorful">Colorful border!</div>

Now add this to your <style> block:

.box-colorful {
  border-width: 5px;              /* thicker border */
  border-style: solid;            /* solid line */
  border-color: orange;           /* named color */
  padding: 10px;                  /* space inside */
  margin-top: 10px;               /* space above */
}

Refresh your browser. You should now see a bright orange border.

Try it yourself: experiment with colors

Change border-color: orange; to:

border-color: #ff00ff;      /* bright pink using hex */

Then try:

border-color: rgb(0, 150, 136);  /* teal using RGB */

Play with different named colors (red, purple, gold) and see what you like.

Putting It All Together: The Shorthand `border` Property

So far, we’ve written:

border-width: 3px;
border-style: solid;
border-color: black;

Typing all three every time can feel repetitive. CSS gives you a shortcut called the border shorthand.

You can combine width, style, and color into a single line:

border: 3px solid black;

The order is:

Width
Style
Color

Let’s use the shorthand to create a few different boxes in one go.

Update your <style> section to this (you can replace the old box rules if you like):

.box {
  border: 2px solid black;  /* width, style, color */
  padding: 10px;
  margin-top: 10px;
}

.box-dashed {
  border: 3px dashed blue;  /* dashed blue border */
  padding: 10px;
  margin-top: 10px;
}

.box-colorful {
  border: 5px double red;   /* double red border */
  padding: 10px;
  margin-top: 10px;
}

Refresh your page to see all three different borders.

Try it yourself: create your own box

Add a new element in the body:

<div class="my-box">My custom border!</div>

Create a new style:

.my-box {
  border: 4px dotted green;  /* you choose width, style, color */
  padding: 15px;
  margin-top: 10px;
}

Refresh and check it out.

Try different combinations, like 10px solid purple or 1px dashed gray, and see what feels right.

Bonus: Different Borders on Each Side

You can also control each side of the border separately. This can be useful for underlines or card designs.

Example: a box with only a bottom border.

.underline-box {
  border-bottom: 3px solid blue;  /* only bottom border */
  padding: 10px;
  margin-top: 10px;
}

Add this HTML to see it in action:

<div class="underline-box">I only have a bottom border!</div>

You can also mix sides:

.mixed-box {
  border-top: 4px solid red;     /* top border */
  border-right: 4px dashed blue; /* right border */
  border-bottom: 4px solid green;/* bottom border */
  border-left: 4px dotted purple;/* left border */
  padding: 10px;
  margin-top: 10px;
}

Try adding a <div class="mixed-box">Mixed borders!</div> and see how each side looks different.

Quick Recap and What’s Next

You’ve just learned how to control:

border-width – how thick the border is
border-style – solid, dashed, dotted, double, and more
border-color – using names, hex codes, or RGB values
Shorthand border – combine width, style, and color in one line
Side-specific borders – like border-top or border-bottom

You now know enough to add simple but effective visual design to any box, button, or section of a web page. That’s a big step forward in learning CSS.

Next steps you can explore:

Add rounded corners with border-radius
Combine borders with background colors and fonts
Design a simple card layout or button set using the border tricks you learned today

Most importantly, keep experimenting. Change values, refresh your page, and notice what happens. Every small test you do makes you more comfortable with code—and that’s how real learning happens.

Mudzinga