CSS Border

CSS border property is used to specify the style, width, and color of an HTML element's. The HTML element can have four border properties (top, bottom, left, and right).

In this CSS border tutorial, you can learn how to define border thickness and color with one OR all sides of an HTML element.

CSS Border Properties

To define the border of an HTML element there are five border property which can be used according to requirement:

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

Syntax for border value

Define border value like border: 'thickness type' 'color':

  • Thickness: To define th thickness of border, the value should be define any length unit like px, vw, cm, etc.
  • Type: To define which kind of border you want for example solid, dotted, etc.
  • Color: To define color of border, color value like, red, blue, #231, etc.

CSS Border Style Types

The border-style property specifies what kind of border to display, list mentioned below:

  • dotted: Define a dotted border
  • dashed: Define a dashed border
  • solid: Define a solid border
  • double: Define a double border
  • none: Define no border
  • hidden: Define a hidden border

CSS Border Style 3D Types

The effect of 3D border depends on the border-color value

  • groove: Define a 3D grooved border
  • ridge: Define a 3D ridged border
  • inset: Define a 3D inset border
  • outset: Define a 3D outset border

CSS border-left


div_1{
     width: 231px;
     height: 231px;
     background-color: #367a06;
     border-left: 5px solid #131132;
  }
see with code →

CSS border-right


div_2{
     width: 232px;
     height: 232px;
     background-color: #423113;
     border-right: 4px dotted red;
  }
see with code →

CSS border-top


div_3{
     width: 233px;
     height: 233px;
     background-color: #231424;
     border-top: 11px solid #134233;
  }
see with code →

CSS border-bottom


div_4{
     width: 235px;
     height: 235px;
     background-color: #c2d;
     border-bottom: 17px solid #342;
  }
see with code →

CSS border (All in One)

The border is works for all sides


div_5{
     width: 236px;
     height: 236px;
     background-color: #367a06;
     border: 7px solid brown;
  }
see with code →

CSS border:none

The CSS border NONE remove previous border.

Check these example for more understanding

CSS Border Color

The CSS border-color property is used to set the color of the four borders.

  • name: Define a color name, like 'green'
  • Hex: Define a hex value, like '#ffffff'
  • RGB: Define a RGB value, like 'rgb(0,0,0)'
  • Transparent

Policy

GDATAMART.COM is optimized for learning & job information; The users try to improve your knowledge and practical experience through this site but we cannot warrant full correctness of all content... Learn More → | Sitemap →

© 2020 GDATAMART | All Rights Reserved