PLATFORM
  • Tails

    Create websites with TailwindCSS

  • Blocks

    Design blocks for your website

  • Wave

    Start building the next great SAAS

  • Pines

    Alpine & Tailwind UI Library

  • Auth

    Plug'n Play Authentication for Laravel

  • Designer comingsoon

    Create website designs with AI

  • DevBlog comingsoon

    Blog platform for developers

  • Static

    Build a simple static website

  • SaaS Adventure

    21-day program to build a SAAS

Table of Contents

CSS Borders

CSS Borders allow you to apply a border on any HTML element. You can specify the border style, width, and color.

Let me show you a simple example of using the border property:

p{
    border:1px solid black;
}

If that style was applied to the following element:

<p>I have a border</p>

That would result in the following outcome:

CSS border example

Let's analyze the border property a bit more. As you can see we have the border property with 3 values, 1px solid black. Each corresponds to the following properties which can also be applied separately:

CSS Border Properties

  • border-width - specify the width of the border in pixels
  • border-style - specify the style of the border (solid, dashed, dotted, etc.)
  • border-color - specify the color of the border

So, we could create the same output by specifying each of these separately:

p{
    border-width: 1px;
    border-style: solid;
    border-color: black;
}

Additionally, you can specify each of the sides of the border with, border-top, border-right, border-bottom, and border-left. Take a look at the following example of each border with different widths, styles, and colors.

p{
    border-top: 5px solid green;
    border-right: 10px dotted red;
    border-bottom: 15px dashed blue;
    border-left: 20px solid black;
}

This code example would produce the following result:

CSS Border Top, Right, Left, and Bottom


Next, we'll move on to talking about CSS margins.