All css border attributes tutorial.

Another CSS Border attribute

All another css attribute which is available till 2022.

In this page we will learn the following.

• border-style
• border-color
• border-sides

CSS Border width

You can give specific bodder widths or medium, thick defined attribute. some examples are:-

    p {
        border-style:solid;
        border-width:thick;
    }
  

preview

thick border width

    p {
        border-style:solid;
        border-width:medium;
    }
  

preview

medium border width

    p {
        border-style:solid;
        border-width:2px;
    }
  

preview

specific (2px) border width

---

CSS Border color

You can give specific border color name or give some hex, rgb, hsl values in background-color attribute. some examples are:-

    p {
        border-style:solid;
        border-color:green;
    }
  

preview

green border-color

    p {
        border-style:solid;
        border-color:#0a00d8;
    }
  

preview

blue border-color

    p {
        border-style:inset;
        border-color:rgb(200,55,23);
    }
  

preview

red border-color

---

CSS Border Sides

You can define 4 another attribute in border-sides that is border-top-style, border-bottom-style, border-left-style, border-right-style. which we will see further and one will be your practical task. some examples are:-

    p {
        border-top-style:solid;
        border-color:green;
        border-width:thick;
    }
  

preview

green border-color with sides top only

    p {
        border-bottom-style:solid;
        border-color:green;
        border-width:thick;
    }
  

preview

blue border-color with bottom border

    p {
         border-bottom-style:solid;
        border-color:green;
        border-width:thick;
    }
  

preview

red border-color with border side left

---