Wow .. thanx for the feedback .. with ur help I'll add more tips below .. keep an eye on them XD
What's a border?
Border is what surrounds your html/css object/item, let it be a text, an empty box, or an image .. etc
What makes up a border?
Border has four properties:
Whether you choose for your border to be visible or not, bear in mind it's made up of four parts:
Color - Width - Style - Radius
Whether you choose for your border to be visible or not, bear in mind it's made up of four parts:
Top - Bottom - Right - Left
How to use that in CSS?
The border properties have different ways to write down their values, but I always use a fixed/limited way:
color: #------; --> border color
width: --px; --> border thickness
style: solid, dashed, dotted; --> border appearance
radius: --px; -->border corner
Thus you can consider your border to be one entity and give it one value for each property .. e.g:
border-width:3px;
Or consider the four parts and give each its own value .. e.g:
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
An example for a short way to write it is:
border-width: 1px 2px 3xp 4xp;
This way top border will be 1px
This way right border will be 2px
This way bottom border will be 3px
This way left border will be 4px
color: #------; --> border color
width: --px; --> border thickness
style: solid, dashed, dotted; --> border appearance
radius: --px; -->border corner
Thus you can consider your border to be one entity and give it one value for each property .. e.g:
border-width:3px;
Or consider the four parts and give each its own value .. e.g:
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
An example for a short way to write it is:
border-width: 1px 2px 3xp 4xp;
This way top border will be 1px
This way right border will be 2px
This way bottom border will be 3px
This way left border will be 4px
Come on .. applied examples plz!!
The chit chat above was a quick overlook of what I think is important about borders .. From down below you'll see some live examples of how interesting a border can be .. the code will be written inside the border!
Colored border
Dashed border
border: 4px dashed #CC6633;
Border for right sided bars
Lorem ipsum dolor sit amet, Nesmaty consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
border-left:2px dotted #CC6633;Round corner1
border: 2px solid #CC6633;
border-radius: 15px;
border-radius: 15px;
Round corner2
border: none;
border-radius: 15px 15px 15px 15px;
border-radius: 15px 15px 15px 15px;
Round corner3
border: 2px solid #CC6633;
border-radius: 25px 0px 25px 0px;
border-radius: 25px 0px 25px 0px;
Box shadow outside ..
border: none;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
box-shadow: 0px 2px 6px 2px #CC6600;
-moz-box-shadow: 0px 2px 6px 2px #CC6600;
-webkit-box-shadow: 0px 2px 6px 2px #CC6600;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
box-shadow: 0px 2px 6px 2px #CC6600;
-moz-box-shadow: 0px 2px 6px 2px #CC6600;
-webkit-box-shadow: 0px 2px 6px 2px #CC6600;
Box shadow inside + outside .. pointed by gillianivyart
border: none;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
box-shadow: 0px 2px 6px 2px #CC6600, inset 0px 1px 3px 3px #ffffff;
-moz-box-shadow: 0px 2px 6px 2px #CC6600, inset 0px 1px 3px 3px #ffffff;
-webkit-box-shadow: 0px 2px 6px 2px #CC6600, inset 0px 1px 3px 3px #ffffff;
}
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
box-shadow: 0px 2px 6px 2px #CC6600, inset 0px 1px 3px 3px #ffffff;
-moz-box-shadow: 0px 2px 6px 2px #CC6600, inset 0px 1px 3px 3px #ffffff;
-webkit-box-shadow: 0px 2px 6px 2px #CC6600, inset 0px 1px 3px 3px #ffffff;
}
Thumb frames .. requested by spring-sky
.shadow-holder {
background: #CC9966;
border: #996600 1px solid;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-webkit-box-shadow: 0px 1px 3px 1px #CC9966;
box-shadow: 0px 1px 3px 1px #CC9966;
-moz-box-shadow: 0px 1px 3px 1px #CC9966;
margin: 6px;
padding: 6px;
}
.shadow-holder:hover {
background: #FFCC99;
}
Borders can give circles and triangles by neurotype-on-discord
.arrow {
border-color: transparent black;
border-style: solid;
border-width: 20px 0px 20px 20px;
height: 0px;
width: 0px;
}
.circle {
background: #FFCC99;
border-radius: 60px;
height: 50px;
width: 50px;
}
That's it!!
More examples to come soon ^___^