CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



border-top-style

The border-top-style property is used to set the style of the top border of an element. It is one of the many border properties available in CSS that allows you to customize the appearance of an element's border.

The border-top-style property can take on several values, including:

  • none: No border is displayed.
  • hidden: The border is hidden, but still takes up space.
  • dotted: The border is a series of dots.
  • dashed: The border is a series of dashes.
  • solid: The border is a solid line.
  • double: The border is two solid lines.
  • groove: The border looks like it is carved into the page.
  • ridge: The border looks like it is coming out of the page.
  • inset: The border looks like it is pressed into the page.
  • outset: The border looks like it is coming out of the page.

Here are some examples of how to use the border-top-style property:

  <p style="border-top-style: dotted;">This paragraph has a dotted top border.</p>
  <p style="border-top-style: dashed;">This paragraph has a dashed top border.</p>
  <p style="border-top-style: solid;">This paragraph has a solid top border.</p>
  <p style="border-top-style: double;">This paragraph has a double top border.</p>
  <p style="border-top-style: groove;">This paragraph has a groove top border.</p>
  <p style="border-top-style: ridge;">This paragraph has a ridge top border.</p>
  <p style="border-top-style: inset;">This paragraph has an inset top border.</p>
  <p style="border-top-style: outset;">This paragraph has an outset top border.</p>

You can also use the border-top-style property in combination with other border properties to create more complex borders. For example:

  <p style="border-top: 2px solid red;">This paragraph has a 2 pixel solid red top border.</p>
  <p style="border: 1px dashed blue; border-top-width: 3px;">This paragraph has a 3 pixel dashed blue top border.</p>

It's important to note that the border-top-style property only affects the top border of an element. If you want to set the style of all four borders, you can use the border-style property instead.

Overall, the border-top-style property is a useful tool for customizing the appearance of an element's top border. By combining it with other border properties, you can create a wide variety of border styles to suit your needs.

References

Activity