CSS приклад: border-top-color

Тег CSS border-top-color з прикладом

Цей тег в CSS встановлює колір верхньої межі елемента. Він задається у вигляді: border-top-color: колір | transparent | inherit.

Де:

  • колір - вказується конкретний колір
  • transparent - встановлює прозорий колір
  • inherit - успадковує значення від батька

Цей тег дозволяє встановлювати колір верхньої межі елемента для оформлення.

Приклад:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-top-color</title>
  <style>
   h1 {
    border-top-color: #ccc;
    border-top-style: double;
    border-top-width: 7px;
    border-left-color: #ccc;
    border-left-style: solid;
    border-left-width: 2px;
    padding: 7px;
   }
  </style>
 </head>
 <body>
  
  <h1>Lorem ipsum dolor sit amet</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
  lobortis nisl ut aliquip ex ea commodo consequat.</p>
  
 </body>
</html>

Браузери:

Internet Explorer 6 не підтримує значення transparent. Браузер Internet Explorer до версії 7.0 включно не підтримує inherit.

Колір межі може трохи відрізнятися в різних браузерах при використанні значень стилю groove, ridge, inset або outset.

Часті запитання

  • Q: Як використовувати border-top-color в CSS?

    A: Властивість border-top-color визначає колір верхньої межі елемента. Наприклад: div { border-top-color: red; }

  • Q: Де можна використати border-top-color в CSS?

    A: Властивість border-top-color може бути використана для встановлення коліру верхньої межі будь-якого блокового елемента на веб-сторінці.

  • Q: Як встановити різні кольори для верхньої межі елемента за допомогою border-top-color в CSS?

    A: Можна вказати різні кольори для верхньої межі елемента, використовуючи властивість border-top-color разом із border-top-style та border-top-width.

  • Q: Чи можна використовувати border-top-color для інших геометричних фігур, окрім прямокутників?

    A: Властивість border-top-color застосовується до верхньої межі будь-якого елемента з геометричною формою, яка має верхню межу.

  • Q: Чи можна використовувати border-top-color разом із градієнтом у CSS?

    A: Так, можна використовувати border-top-color разом із градієнтами, щоб створити складні верхні межі елементів.