Css Borders Tutorial with all their values and examples

CSS BORDERS

The CSS border properties allow you to specify the style, width, and color of an element's border.

Example

    p {
        border-style:dashed;
    }
  

preview

this is dashed border style

---

border-style have 10 values which we will see further as well as you can use mixed border-style for using border-style.

you have these all values to implement in border-style attribute.

1. dotted
2. dashed
3. solid
4. double
5. groove
6. ridge
7. inset
8. outset
9. none
10. hidden

Example Code

    p {
      border-style:dashed;
    }
  

Preview

This is dashed style

---

Example Code

    p {
      border-style:dotted;
    }
  

Preview

This is dotted style

---

Example Code

    p {
      border-style:solid;
    }
  

Preview

This is solid style

---

Example Code

    p {
      border-style:double;
    }
  

Preview

This is double style

---

Example Code

    p {
      border-style:groove;
    }
  

Preview

This is groove style

---

Example Code

    p {
      border-style:ridge;
    }
  

Preview

This is ridge style

---

Example Code

    p {
      border-style:inset;
    }
  

Preview

This is inset style

---

Example Code

    p {
      border-style:outset;
    }
  

Preview

This is outset style

---

Example Code

    p {
      border-style:none;
    }
  

Preview

This is none style

---

Example Code

    p {
      border-style:hidden;
    }
  

Preview

This is hidden style

---

Zoom and look at the style of border

In Shorthand we can create mixed borders like

Example Code

    p {
      border-style:solid dotted dashed double;
    }
  

Preview

This is mixed style

---

we will create some another examples in this website.