CSS Border

Basic Border:

Lines a solid black border around element.

                          
                            div {
                                border: 1px solid black;
                            }                                                                                                                                      
                          
                        

Border Style:

Apart from setting the border style (e.g., solid, dashed or dotted), the code block does the following.

                          
                            img {
                                border-style: dashed;
                            }                                                                                                                                            
                          
                        

Border Width:

Defines the width of the border. It can be specified in pixels, em units, etc.

                          
                            p {
                                border-width: 2px;
                            }                                                                                                                                                                      
                          
                        

Border Color:

Put on a border's color.

                          
                            button {
                                border: 1px solid #3498db; /* blue border */
                            }                                                                                                                                                                                                  
                          
                        

Individual Borders:

You can redefine style properties from solid type and width to sold color from each Flip side.

                          
                            div {
                                border-top: 2px dotted #e74c3c;
                                border-right: 1px solid #2ecc71;
                                border-bottom: 3px dashed #f39c12;
                                border-left: 4px double #3498db;
                            }                                                                                                                                                                                                                              
                          
                        

Rounded Corners:

Has rounded corners for passing an element.

                          
                            div {
                                border: 2px solid #e67e22;
                                border-radius: 10px;
                            }                                                                                                                                                                                                                                                          
                          
                        

Shorthand:

The property border can be used with the shorthand to make the border properties the same at once.

                          
                            article {
                                border: 1px solid #9b59b6;
                            }                                                                                                                                                                                                                                                                                      
                          
                        

These examples are practiced for the commonly used CSS-related styling of borders.

You have the ability to do this by point and clicking so you end up with any border style you desire!