CSS Border

CSS Border

The CSS border property is used to define the outer boundary of an HTML element, making it visually distinct from other elements on the page. Borders can be styled in terms of their width, color, and type (style). CSS allows you to create a variety of borders by combining these attributes.

Border Properties

• border Shorthand Property
  The border shorthand property sets the width, style, and color of the border in a single declaration.
  Example:

  Copy code

    border: 2px solid blue;
  

• Individual Border Properties

  • border-width: Specifies the thickness of the border.
    Example:
    Copy code

      border-width: 5px;
    

  • border-style: Defines the style of the border (e.g., solid, dashed, dotted, etc.).
    Example:
    Copy code

      border-style: dashed;
    

  • border-color: Sets the color of the border.
    Example:
    Copy code

      border-color: red;
    

• Border-Side Properties
  You can define borders for specific sides of an element:

  • border-top
  • border-right
  • border-bottom
  • border-left

  Example:

  Copy code

    border-top: 3px dotted green;
    border-left: 5px solid black;
  

• Border Radius
  The border-radius property creates rounded corners for borders.
  Example:

  Copy code

    border: 2px solid purple;
    border-radius: 10px;
  

Border Styles

CSS provides various border styles:

• none: No border.
• solid: A single solid line.
• dashed: A dashed line.
• dotted: A dotted line.
• double: Two parallel lines.
• groove: A carved effect that gives the impression of depth.
• ridge: Similar to groove but reversed.
• inset: The border looks embedded.
• outset: The border appears to pop out.

Example of multiple styles:

  border: 4px groove gray;

Examples

• Basic Border Example

  Copy code

    <div style="border: 3px solid black; padding: 10px;">
        This is a bordered box.
    </div>
  

• Different Borders for Each Side

  Copy code

    <div style="border-top: 2px solid red; border-right: 4px dashed blue; border-bottom: 3px dotted green; border-left: 5px double black;">
      Different borders for each side.
    </div>
  

• Rounded Corners

  Copy code

    <div style="border: 2px solid orange; border-radius: 15px; padding: 10px;">
      Rounded border example.
    </div>
  

• Combined Example

  Copy code

    <div style="border: 5px groove purple; border-radius: 20px; padding: 15px; background-color: #f0f0f0;">
      Stylish border with rounded corners and background color.
    </div>
  

Conclusion

The CSS border property is a versatile tool for styling the edges of elements, enhancing visual appeal and usability. By experimenting with width, style, color, and radius, you can create borders that fit your design needs effectively.