Как сделать полупрозрачный border?

Question

[Сергей Ракипов]

border-top-style: solid;
    border-top-width: 10px;
    border-top-color: rgba(0,0,0,0.3);

Сделал так но не работает

Answer 1

[Spartak (Web-StyleStudio)]

Сделал так но не работает

Работает, это у вас скорее всего стили наследуются

Comments

[Сергей Ракипов]

а как узнать что наследуется и как этого избежать?

[Spartak (Web-StyleStudio)]

Сергей Ракипов,

а как узнать что наследуется и как этого избежать?

border-top-color: rgba(0,0,0,0.3) !important;
Если у вас так заработает, значит наследуются. Смотрите в девтулс какой клас наследует

[Сергей Ракипов]

Spartak (Web-StyleStudio), а где это девтулс

[Сергей Ракипов]

Spartak (Web-StyleStudio), не работает

border-top-style: solid;
    border-top-width: 30px;
    border-top-color: rgba(0,0,0,0.3) important;

есть просто не прозрачная граница

[Spartak (Web-StyleStudio)]

Сергей Ракипов,

а где это девтулс

В браузере - инструменты разработчика
Ctrl + Shift + I
Или F12 в некоторых браузерах

[Spartak (Web-StyleStudio)]

Сергей Ракипов,

не работает

!important
Отредактировал комментарий

[Spartak (Web-StyleStudio)]

Сергей Ракипов,
Исправьте на border-top-color: rgba(0,0,0,0.3) !important;

[Сергей Ракипов]

Spartak (Web-StyleStudio), да сделал все сработало, но граница стала снаружи а не внутри. хотя есть

box-sizing: border-box !important;
    border-top-style: solid;
    border-top-width: 30px;
    border-top-color: rgba(34,56,0,0.7)!important;

[Spartak (Web-StyleStudio)]

Сергей Ракипов,

но граница стала снаружи а не внутри

Вы о чём?

[Сергей Ракипов]

Spartak (Web-StyleStudio), ну вот видите граница как бы внутри

[Spartak (Web-StyleStudio)]

Сергей Ракипов,
box-sizing: content-box;

[Сергей Ракипов]

Spartak (Web-StyleStudio), не работает

Answer 2

[Fezarmon]

opacity можешь использовать

Comments

[Сергей Ракипов]

не могу, оно воздействует на весь блок