1. css
  2. /properties
  3. /border-top

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

ValueDescription
thinThin border
mediumMedium border (default value)
thickThick border
<length>Width of the border in length units (e.g. px, em, cm)
<percentage>Width of the border in percentage of the containing block
ValueDescription
noneNo border
hiddenSame as 'none', except in terms of border conflict resolution for table elements
dottedDotted border
dashedDashed border
solidSolid border
doubleTwo parallel solid lines
groove3D grooved border. The effect depends on the border-color value
ridge3D ridged border. The effect depends on the border-color value
inset3D inset border. The effect depends on the border-color value
outset3D outset border. The effect depends on the border-color value
ValueDescription
<color>Border color, can be specified by name, hex, RGB or RGBA value

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

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes