css border properties code example

Example 1: border types html css

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Example 2: css border style

/* 
 * border-style:
solid: A solid, continuous line.
none (default): No line is drawn.
hidden: A line is drawn, but not visible. this can be handy for adding a little extra width to an element without displaying a border.
dashed: A line that consists of dashes.
dotted: A line that consists of dots.
double: Two lines are drawn around the element.
groove: Adds a bevel based on the color value in a way that makes the element appear pressed into the document.
ridge: Similar to groove, but reverses the color values in a way that makes the element appear raised.
inset: Adds a split tone to the line that makes the element appear slightly depressed.
outset: Similar to inset, but reverses the colors in a way that makes the element appear slightly raised.
*/

/* Example using the typical solid border-style */
div {
	border: 1px solid #4e1f9d;
}

Example 3: css border

<html>
   <head>
   </head>
   
   <body>
      <p style = "border-width:4px; border-style:none;">
         This is a border with none width.
      </p>
      
      <p style = "border-width:4px; border-style:solid;">
         This is a solid border.
      </p>
      
      <p style = "border-width:4px; border-style:dashed;">
         This is a dashed border.
      </p>
      
      <p style = "border-width:4px; border-style:double;">
         This is a double border.
      </p>
      
      <p style = "border-width:4px; border-style:groove;">
         This is a groove border.
      </p>
      
      <p style = "border-width:4px; border-style:ridge">
         This is a ridge  border.
      </p>
      
      <p style = "border-width:4px; border-style:inset;">
         This is a inset border.
      </p>
      
      <p style = "border-width:4px; border-style:outset;">
         This is a outset border.
      </p>
      
      <p style = "border-width:4px; border-style:hidden;">
         This is a hidden border.
      </p>
      
      <p style = "border-width:4px; 
         border-top-style:solid;
         border-bottom-style:dashed;
         border-left-style:groove;
         border-right-style:double;">
         This is a a border with four different styles.
      </p>
   </body>
</html>

Tags:

Javascript Example

Recent Posts