border-top

Definition

The CSS property border-top is used to specify the style, width, and color of the top border of an HTML element.

Examples

Creating a 2px solid black top border for a div element:

div {
  border-top: 2px solid black;
}

Creating a 5px double blue top border for a p element:

p {
  border-top: 5px double blue;
}

Creating a 1px dotted red top border for a table element:

table {
  border-top: 1px dotted red;
}

Creating a 3px groove yellow top border for a h1 element:

h1 {
  border-top: 3px groove yellow;
}

Creating a 4px ridge green top border for a section element:

section {
  border-top: 4px ridge green;
}

Values

Best Practices

• Use the border-top shorthand property instead of specifying each property separately (border-top-width, border-top-style, and border-top-color). This makes the code more concise and easier to read.
• Use a consistent border width and style throughout your website to maintain a consistent visual design.
• Use appropriate border styles for different elements. For example, you might use a solid border for headings and a dotted border for subheadings.
• Use a color that matches the overall color scheme of the website or the color of the text to make sure that the border is not too distracting.
• Be mindful of accessibility when using border colors. Make sure that the border color contrasts enough with the background color to be easily visible to people with color vision deficiencies.
• Use CSS classes to group similar elements together and apply the same border styles. This will make it easier to update your website's design in the future.
• Be mindful of the border-top width and style when working with responsive design, make sure the border width and style will adapt to different screen sizes.
• Be aware that borders can have a significant impact on the layout of your website. Be sure to test your website with different border widths and styles to ensure that it looks good on all screen sizes and devices.
• Use browser-specific prefixes for border-top to ensure cross-browser compatibility, e.g. -moz-border-top, -webkit-border-top.
• Use the CSS 'box-sizing' property to include the border and padding in an element's total width and height.

Browser Compatibility