Border

Classes regarding border styles.

/* CORE */
.noborder {border: none}
.border-trans-1 {border:  1px solid transparent} .border-trans {border:  0px solid transparent}

/* BORDER COLOR */
.border-red {border: 1px solid red}
.border-red-50 {border: 1px solid #ff000077}
.border-white {border: 1px solid white}
.border-white-50 {border: 1px solid #ffffff77}
.border-grey {border: 1px solid grey}
.border-lgrey {border: 1px solid lightgray}
.border-grey-50 {border: 1px solid #88888888}
.border-grey-20 {border: 1px solid #88888828}
.border-lgrey-50 {border: 1px solid #aaaaaa}
.border-green {border: 1px solid green}
.border-green-50 {border: 1px solid #00ff0077}
.border-blue {border: 1px solid blue}
.border-blue-50 {border: 1px solid #0000ff77}

/* SIDES */
.border-red-t {border-top: 1px solid red}
.border-red-50-t {border-top: 1px solid #ff000077}
.border-white-t {border-top: 1px solid white}
.border-white-50-t {border-top: 1px solid #ffffff77}
.border-grey-t {border-top: 1px solid grey}
.border-lgrey-t {border-top: 1px solid lightgray}
.border-grey-50-t {border-top: 1px solid #88888888}
.border-lgrey-50-t {border-top: 1px solid #aaaaaa}
.border-green-t {border-top: 1px solid green}
.border-green-50-t {border-top: 1px solid #00ff0077}
.border-blue-t {border-top: 1px solid blue}
.border-blue-50-t {border-top: 1px solid #0000ff77}

.border-red-b {border-bottom: 1px solid red}
.border-red-50-b {border-bottom: 1px solid #ff000077}
.border-white-b {border-bottom: 1px solid white}
.border-white-50-b {border-bottom: 1px solid #ffffff77}
.border-grey-b {border-bottom: 1px solid grey}
.border-lgrey-b {border-bottom: 1px solid lightgray}
.border-grey-50-b {border-bottom: 1px solid #88888888}
.border-lgrey-50-b {border-bottom: 1px solid #aaaaaa}
.border-green-b {border-bottom: 1px solid green}
.border-green-50-b {border-bottom: 1px solid #00ff0077}
.border-blue-b {border-bottom: 1px solid blue}
.border-blue-50-b {border-bottom: 1px solid #0000ff77}
.border-orange-b {border-bottom: 1px solid orange}
.border-orange-50-b {border-bottom: 1px solid #ff990077}


.border-red-l {border-left: 1px solid red}
.border-red-50-l {border-left: 1px solid #ff000077}
.border-white-l {border-left: 1px solid white}
.border-white-50-l {border-left: 1px solid #ffffff77}
.border-grey-l {border-left: 1px solid grey}
.border-lgrey-l {border-left: 1px solid lightgray}
.border-grey-50-l {border-left: 1px solid #88888888}
.border-lgrey-50-l {border-left: 1px solid #aaaaaa}
.border-green-l {border-left: 1px solid green}
.border-green-50-l {border-left: 1px solid #00ff0077}
.border-blue-l {border-left: 1px solid blue}
.border-blue-50-l {border-left: 1px solid #0000ff77}

.border-red-r {border-right: 1px solid red}
.border-red-50-r {border-right: 1px solid #ff000077}
.border-white-r {border-right: 1px solid white}
.border-white-50-r {border-right: 1px solid #ffffff77}
.border-grey-r {border-right: 1px solid grey}
.border-lgrey-r {border-right: 1px solid lightgray}
.border-grey-50-r {border-right: 1px solid #88888888}
.border-lgrey-50-r {border-right: 1px solid #aaaaaa}
.border-green-r {border-right: 1px solid green}
.border-green-50-r {border-right: 1px solid #00ff0077}
.border-blue-r {border-right: 1px solid blue}
.border-blue-50-r {border-right: 1px solid #0000ff77}


/* BORDER RADIUS */
.bord-children-2 * { border-radius: 2px;}
/* ALL */
.bord-r-5{border-radius: 5px}.bord-r-8{border-radius: 8px}.bord-r-12{border-radius: 12px} 
.bord-r-10{border-radius: 10px}.bord-r-15{border-radius: 15px}.bord-r-25{border-radius: 25px}
.bord-r-50{border-radius: 50px}.bord-r-100{border-radius: 100px}.bord-r-100p{border-radius: 100%}
/* LEFT */
.bord-r-l-5{border-radius: 5px 0 0 5px}.bord-r-l-8{border-radius: 8px 0 0 8px}
.bord-r-l-12{border-radius: 12px 0 0 12px}.bord-r-l-10{border-radius: 10px 0 0 10px}
.bord-r-l-15{border-radius: 15px 0 0 15px}.bord-r-l-25{border-radius: 25px 0 0 25px}
.bord-r-l-50{border-radius: 50px 0 0 50px}.bord-r-l-100{border-radius: 100px 0 0 100px}
.bord-r-l-100p{border-radius: 100% 0 0 100%}
/* right */
.bord-r-r-5{border-radius: 0 5px 5px 0}.bord-r-r-8{border-radius: 0 8px 8px 0}
.bord-r-r-12{border-radius: 0 12px 12px 0}.bord-r-r-10{border-radius: 0 10px 10px 0}
.bord-r-r-15{border-radius: 0 15px 15px 0}.bord-r-r-25{border-radius: 0 25px 25px 0}
.bord-r-r-50{border-radius: 0 50px 50px 0}.bord-r-r-100{border-radius: 0 100px 100px 0}
.bord-r-r-100p{border-radius: 0 100% 100% 0}
/* bottom */
.bord-r-b-5{border-radius: 0 0 5px 5px}.bord-r-b-8{border-radius: 0 0 8px 8px}
.bord-r-b-12{border-radius: 0 0 12px 12px}.bord-r-b-10{border-radius: 0 0 10px 10px}
.bord-r-b-15{border-radius: 0 0 15px 15px}.bord-r-b-25{border-radius: 0 0 25px 25px}
.bord-r-b-50{border-radius: 0 0 50px 50px}.bord-r-b-100{border-radius: 0 0 100px 100px}
.bord-r-b-100p{border-radius: 0 0 100% 100%}
/* top */
.bord-r-t-5{border-radius: 5px 5px 0 0}.bord-r-t-8{border-radius: 8px 8px 0 0}
.bord-r-t-12{border-radius: 12px 12px 0 0}.bord-r-t-10{border-radius: 10px 10px 0 0}
.bord-r-t-15{border-radius: 15px 15px 0 0}.bord-r-t-25{border-radius: 25px 25px 0 0}
.bord-r-t-50{border-radius: 50px 50px 0 0}.bord-r-t-100{border-radius: 100px 100px 0 0}
.bord-r-t-100p{border-radius: 100% 100% 0 0}