HTML CSS Borders

Border styles

Example
I created a bulleted list and styled each list item. For each list tag you need to add the class name <li class="">
I added seperate colors to help differentiate the styles. Notice the color green does not show up in the "hidden" style.

• li.dashed {border-style: dashed; color : red ;}
• li.dotted {border-style: dotted; color : blue ;}
• li.none {border-style: none; color : orange ;}
• li.hidden {border-style: hidden; color : green ;}
• li.dotDashSolidDouble {border-style: dotted dashed solid double; color : brown ;}
• li.groove {border-style: groove; color : black ;}
• li.ridge {border-style: ridge; color : red ;}
• li.inset {border-style: inset; color : blue ;}
• li.outset {border-style: outset; color : purple ;}
• li.solid {border-style: solid; color : red ;}
• li.double {border-style: double; color : green ;}

Border Width

• li.differentSizeBorders {border-style: double ; border-width: 20px 10px 4px 2px;}
⇧ You can declare different border sizes in one statement as you see here.
• li.leftBorder { border-style: solid ; border-left-width: 30px;}
⇧ You can set just one border, as in this class, but you must first declare the border-style
• li.colorBorder { border-style: solid; border-width: 20px; border-color: red blue green yellow ;}
⇧ You can set one, 2, 3 or 4 colors, as is being done here, to the border.

• 	li.mixedBorder{ border-top-style: dotted; border-width: 20px;
                  	border-right-style: solid;  border-width: 10px;
      			border-bottom-style: ridge; border-width:  30px;
    	        	border-left-style: solid;   border-width:  20px;
  			border-color: red blue green yellow;
  	}
  

⇧ As you see here, you can mix the elements up.

border-radius Property

	div.roundBorder{
					border-style: ridge ;
					height:200px ;
					width: 75% ;
					border-width: 10px ;
					border-radius: 40px;	
	}

		By making height, 
		width and radius the same,
		you can make a circle.

		
	div.circle{
		    border-style: solid ;
                    height:400px ;
		    width: 400px ;
		    border-width: 10px ;
                    border-radius: 400px ;	
    	}

Additional Resources

• Set all selectors in one statement
• W3C Schools Border Width
• Border Spacing for Tables
• Border Radius Generator
• CSS Basics Borders