CSS Border

CSS borders create boundaries around webpage elements. They consist of border-width, border-style, and border-color.

Shorthand property border combines all three, allowing precise control over element layout and design.

Basics of the border property

Applying a simple border to an element
Try yourself 
        
            div {
   border: 1px solid #000;
   width: 200px;
   height: 100px;
}

This applies a solid black border with a width of 1 pixel around all <div> elements.

Applying a simple border to a div (an element)
Try yourself 
        
            div {
   border: 2px dashed blue;
   width: 200px;
   height: 100px;
}

This example sets a dashed blue border with a width of 2 pixels for all <div> elements.

Customizing border style and width for a div (an element)
Try yourself 
        
            div {
   border-top: 1px solid red;
   border-right: 2px dashed green;
   border-bottom: 3px dotted blue;
   border-left: 4px double orange;
   width: 200px;
   height: 100px;
}

This creates a different border style and color for each side of all <div> elements, with red on top, green on the right, blue at the bottom, and orange on the left.

Using border-radius for rounded corners on a div (an element)
Try yourself 
        
            div {
   border: 2px dashed blue;
   border-radius: 10px;
   width: 200px;
   height: 100px;
}

The border-radius property adds rounded corners to all <div> elements, making their corners smooth.

Creating complex borders with multiple values for a div
Try yourself 
        
            div {
   border: 2px dashed blue;
   border-width: 1px 2px 3px 4px;
   border-style: solid dashed dotted double;
   border-color: red green blue orange;
   width: 200px;
   height: 100px;
}

This example separates the border properties into individual declarations for more control over each side of all <div> elements. The top border is red and solid, the right border is green and dashed, the bottom border is blue and dotted, and the left border is orange and double.

Removing borders with border: none; on a div (an element)
Try yourself 
        
            div {
   border: none;
   width: 200px;
   height: 100px;
}

This removes all borders from all <div> elements.

By following this modified tutorial, you can create various border styles and customize the appearance of borders for all HTML elements using CSS.