border-top-color в CSS


CSS | Свойство border-top-color

Свойство border-color используется для окрашивания всех границ контейнера одним и тем же цветом.
Свойство border-top-color предоставляет возможность заливки другого цвета от родительского border-color до верхней границы контейнера.

Примечание: Позаботьтесь о порядке при написании оператора в CSS, т. Е. CSS примет последнее значение свойства, поэтому для ожидаемого вывода всегда пишите border-top-color ниже border-color.

Синтаксис:

Стоимость недвижимости:

    color: устанавливает цвет верхней границы элемента.
    Синтаксис:

CSS border-top-color

The CSS border-top-color property allows you to set the color of an element’s top border.

You can also use border-color to set the color for all sides of the element, or border-top to set all properties for the top border.

If you use a border without specifying its color, it will use the currentColor value (which is the value of the color property).

The border’s style needs to be specified before it can be displayed. You can use either border-top-style or border-style to specify the border’s style.

Also, the default width of a border is medium . You can specify the width using either the border-top-width or border-width properties.

Syntax

Possible Values

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

border-top-color

Свойство CSS border-top-color используется для указания цвета верхней части рамки элемента (верхней границы).

Вместо border-top-color можно использовать универсальное свойство CSS border-color.

Тип свойства

Применяется: ко всем элементам.

Значения

Значением свойства CSS border-top-color является указание цвета одним из следующих вариантов:

  • Имя цвета — Многие цвета имеют имена, которые браузеры понимают, например: red, green, blue.
  • HEX-код цвета — Шестнадцатеричное значение цвета, перед которым ставится знак решетка (#). Каждый HEX-код состоит из трех пар: первая пара отвечает за красный цвет, вторая — за зеленый, третья — за синий, например: #CC9966 или #996699.
  • Цвет в формате RGB — Цвет в десятичном формате, он начинается с аббревиатуры RGB, после которой в скобках, через запятую, указываются три значения. Здесь тоже первое число отвечает за красный цвет, второе — за зеленый, третье — за синий, например: RGB(153, 204, 51).
  • transparent — прозрачный цвет, поэтому сквозь него просвечивает фон родительского элемента.
  • inherit — наследует значение CSS border-top-color от родительского элемента.
Илон Маск рекомендует:  Оставаться на уровне

Процентная запись: не существует.

Значение по умолчанию: совпадает с цветом текста элемента (CSS color).

Синтаксис

Пример CSS: использование border-top-color

Результат. Использование свойства CSS border-top-color.

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Нет Да Да Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Частично Да Да Да Да Да

Internet Explorer 6.0 и 7.0 не понимают значение inherit . При значении transparent IE6 не делает рамку прозрачной, а окрашивает ее в серый цвет.

CSS, border-top with 3 colors, is possible?

It is possible with css have a border-top in the same line with three colors? I already did it with images, but I was trying to learn how to do the same effect with only css but I´m not having sucess.

What I´m trying in css without sucess:

6 Answers 6

You can use background-gradient too wich is alike image : (maybe a duplicate see Is it possible to change the color of a border every 75px? )

Here it could be :

You can use box-shadow to achieve this effect with pure css as @Adrift mentioned above. you can only use the border type of solid. Be sure to check if the browser supports box-shadow. Note how the comma is used.

Another option is to use a border image.

Just a few more tweaks to the same idea and it work fine. Below in line: http://jsfiddle.net/5bVc5/3/

you can do somthing like this :

and notice that the .border:before border-width must be Multiplied by three of the .border:after border-width

You had the right idea.

Fiddle

I create a new version to border-top, border-bottom and border right or left.

HTML:

CSS:

Not the answer you’re looking for? Browse other questions tagged html css css3 or ask your own question.

Linked

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2020 Stack Exchange Inc; user contributions licensed under cc by-sa 4.0 with attribution required. rev 2020.11.9.35389

CSS: border-top-color property

This CSS tutorial explains how to use the CSS property called border-top-color with syntax and examples.

Description

The CSS border-top-color property defines the color of the top border of a box.

Syntax

The syntax for the border-top-color CSS property is:

Parameters or Arguments

The color of the top border. It can be one of the following:

Value Description
#RRGGBB Hexadecimal representation of the border-top-color
p
rgb() RGB representation of the border-top-color
p
name Name of the border-top-color (ie: red, blue, black, white)
p
transparent Border is not displayed but still takes up space on the page
p
inherit Element will inherit the border-top-color from its parent element
p
  • Be sure to set the border-top-style property as well to make sure that your top border appears.
  • See also border-top-style, border-top-width, and border-top properties.
  • Need to convert your color value to a different representation? Try this online tool to convert your color value between hexadecimal and RGB.

Browser Compatibility

The CSS border-top-color property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the border-top-color property below, exploring examples of how to use this property in CSS.

Using Hexadecimal

Let’s look at a CSS border-top-color example where we have provided a hexadecimal value for the border-top-color property.

In this border-top-color example, we have provided a hexadecimal value of #FF0000 which would display a red top border for the

tag. Be sure to apply a border-top-style so that the border appears.

Using RGB

We can also provide the border-top-color value using rgb.

In this border-top-color example, rgb(255,0,0) would also display the top border for the


Using Color Name

Let’s look at a CSS border-top-color example where we have provided the value as a named color.

In this CSS border-top-color example, we have provided the name «red» which would also set the top border to red.

Свойство CSS border-top-color

p
<
border-style:solid;
border-top-color:#ff0000
>

Описание и использование

Свойство CSS border-top-color задает цвет верхней границы элемента.

Заметка: указывайте сначала border-style, перед настройкой цвета. Элемент должен иметь видимую границу, чтобы ее можно было раскрасить.

Значение по умолчанию нет
Наследование нет
Версия CSS CSS 1
Синтаксис JavaScript object.style.borderTopColor=»blue»

Поддержка в браузерах

Свойство border-top-color поддерживается всеми основными браузерами.

Заметка: Internet Explorer 6 и более ранние версии не поддерживают значение «transparent» (прозрачный).

Заметка: ни одна из версий IE (включая IE8) не поддерживает значение inherit.

CSS border-top-color Property

пример

Установите цвет верхней границы:

Определение и использование

Свойство границы верхнего цвета устанавливает цвет верхней границы элемента.

Note: Всегда объявляйте свойство границы стиля до собственности границы верхнего цвета. Элемент должен иметь границы, прежде чем вы можете изменить цвет.

Значение по умолчанию: The current color of the element
Наследование: no
Animatable: yes. Read about animatable Try it
Версия: CSS1
Синтаксис JavaScript: object .style.borderTopColor=»blue» Try it

Поддержка браузеров

Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.

Имущество
border-top-color 1,0 4.0 1,0 1,0 3.5

Note: Internet Explorer 6 (and earlier versions) не поддерживает значение свойства «transparent» .

CSS: border-top-color property

This CSS tutorial explains how to use the CSS property called border-top-color with syntax and examples.

Description

The CSS border-top-color property defines the color of the top border of a box.

Syntax

The syntax for the border-top-color CSS property is:

Parameters or Arguments

The color of the top border. It can be one of the following:

Value Description
#RRGGBB Hexadecimal representation of the border-top-color
p
rgb() RGB representation of the border-top-color
p
name Name of the border-top-color (ie: red, blue, black, white)
p
transparent Border is not displayed but still takes up space on the page
p
inherit Element will inherit the border-top-color from its parent element
p
  • Be sure to set the border-top-style property as well to make sure that your top border appears.
  • See also border-top-style, border-top-width, and border-top properties.
  • Need to convert your color value to a different representation? Try this online tool to convert your color value between hexadecimal and RGB.

Browser Compatibility

The CSS border-top-color property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the border-top-color property below, exploring examples of how to use this property in CSS.

Using Hexadecimal

Let’s look at a CSS border-top-color example where we have provided a hexadecimal value for the border-top-color property.

In this border-top-color example, we have provided a hexadecimal value of #FF0000 which would display a red top border for the

tag. Be sure to apply a border-top-style so that the border appears.

Using RGB

We can also provide the border-top-color value using rgb.

In this border-top-color example, rgb(255,0,0) would also display the top border for the

Using Color Name

Let’s look at a CSS border-top-color example where we have provided the value as a named color.

In this CSS border-top-color example, we have provided the name «red» which would also set the top border to red.

CSS, border-top with 3 colors, is possible?

It is possible with css have a border-top in the same line with three colors? I already did it with images, but I was trying to learn how to do the same effect with only css but I´m not having sucess.

What I´m trying in css without sucess:

6 Answers 6

You can use background-gradient too wich is alike image : (maybe a duplicate see Is it possible to change the color of a border every 75px? )

Here it could be :

You can use box-shadow to achieve this effect with pure css as @Adrift mentioned above. you can only use the border type of solid. Be sure to check if the browser supports box-shadow. Note how the comma is used.

Another option is to use a border image.

Just a few more tweaks to the same idea and it work fine. Below in line: http://jsfiddle.net/5bVc5/3/

you can do somthing like this :

and notice that the .border:before border-width must be Multiplied by three of the .border:after border-width

You had the right idea.

Fiddle

I create a new version to border-top, border-bottom and border right or left.

HTML:

CSS:

Not the answer you’re looking for? Browse other questions tagged html css css3 or ask your own question.

Linked

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2020 Stack Exchange Inc; user contributions licensed under cc by-sa 4.0 with attribution required. rev 2020.11.9.35389

CSS border-top-color Property

CSS border-top-color property sets the border top color of an element.

Usages

The following table outline the usages and version history of this property.

Default value: The value of the color property
Applies to: All elements
Inherited: No
Version: CSS1
JavaScript Syntax: object.style.borderTopColor = «#000000»

Syntax

Here is a syntax for the CSS border-top-color property

Property Values

The following table describes the values of this property.

Value Description
color Default color black. Specifies the border top color
Value Description
color name Name of the border top color (eg, red, pink, blue)
#xxxxxx Hexadecimal representation of the border top color
rgb(x, x, x) RGB representation of the border top color
rgba(x, x, x, x) RGBA representation of the border top color
hsl(x, x, x) HSL representation of the border top color
hsla(x, x, x, x) HSLA representation of the border top color
transparent Specifies the transparent border top color
initial Sets default value of this property
inherit Inherits this property from its parent element

Examples

The example below shows to sets border top color.

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 4+
  • Opera 3.5+
  • Safari 1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.

Илон Маск рекомендует:  is_file - Определяет, является ли файл обычным файлом
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL