border

Definition

In CSS (Cascading Style Sheets), a border is a visual element that surrounds an HTML element, adding a line or a frame around it. The border property is used to set the width, color, and style of an element's border.

Examples

A solid black border of 2 pixels around a paragraph element:

p {
  border: 2px solid black;
}

A dashed red border of 1 pixel around a div element:

div {
  border: 1px dashed red;
}

A double blue border of 3 pixels around an image:

img {
  border: 3px double blue;
}

A groove border of 4 pixels with yellow color around a button:

button {
  border: 4px groove yellow;
}

A dotted green border of 2 pixels with a radius of 5 pixels around a link

a {
  border: 2px dotted green;
  border-radius: 5px;
}

A inset border of 2 pixels with orange color on the top and bottom side of a header

header {
  border-top: 2px inset orange;
  border-bottom: 2px inset orange;
}

Values

Best Practices

• Use semantic HTML: When adding borders to elements, it's important to use semantic HTML tags (such as p, h1, div, etc.) so that the meaning of the content is clear, and the borders make sense in the context of the overall design.
• Keep it simple: Avoid using too many different border styles, colors, and widths on the same page, as it can make the design look cluttered and overwhelming. Instead, use a consistent set of border styles throughout the design to create a clean and unified look.
• Be mindful of accessibility: Make sure that the borders you add don't create accessibility issues for users with visual impairments. For example, avoid using light-colored borders on a light background, as they can be hard to see.
• Use border-radius: Use the border-radius property to create rounded corners on the border of an element. This can add a more polished and professional look to your design.
• Use media queries: Use media queries to adjust the size and style of borders on different screen sizes and devices. For example, you might want to use thinner borders on mobile devices to save screen space.
• Use border for emphasis: Use border to highlight important elements on your page, such as calls-to-action, forms, or images.
• Optimize your code: Avoid repeating the same border styles across multiple elements. Instead, use classes and CSS inheritance to keep your code clean and efficient.
• Test it: Always test your design on different devices and screen sizes to make sure that the borders look the way you want them to, and that the design is accessible for all users.

Browser Compatibility