CSS Border Style Properties

CSS Border properties give you control to set border style. For example border-width, border-style and border-color.

You can also set border style individually like,

Border Border Properties
border-top border-top-color
border-top-style
border-top-width
border-bottom border-bottom-color
border-bottom-style
border-bottom-width
border-left border-left-color
border-left-style
border-left-width
border-right border-right-color
border-right-style
border-right-width

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS border property</title>
</head>
<body>
  <p style="border-style: solid; border-width:1px; border-color: orange;">This paragraph represent the CSS border properties. This way you can change the border color, border width or border style.</p>
</body>
</html>

Run it...   »

CSS border shorthand property

CSS display inline means elements displayed inline in current block of line.

CSS border property write in shorthand way including following border properties:

  1. border-width
  2. border-style
  3. border-color

border: border-width border-style border-color;

Same as above, you can set border shorthand individually,

  • border-left
  • border-right
  • border-top
  • border-bottom

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS border property</title>
</head>
<body>
  <p style="border-top:2px dashed orange;">This element set CSS top border style dashed.</p>
</body>
</html>

Run it...   »

CSS border-style property

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS border property</title>
</head>
<body>
  <p style="border: 2px solid orange;">This element border style solid.</p>
  <p style="border: 2px dotted orange;">This element border style dotted.</p>
  <p style="border: 2px dashed orange;">This element border style dashed.</p>
  <p style="border: 2px double orange;">This element border style double.</p>
  <p style="border: 2px groove orange;">This element border style groove.</p>
  <p style="border: 2px ridge orange;">This element border style ridge.</p>
  <p style="border: 2px inset orange;">This element border style inset.</p>
  <p style="border: 2px outset orange;">This element border style outset.</p>
  <p style="border: 2px hidden orange;">This element border style hidden.</p>
</body>
</html>

Run it...   »