Градиентная закругленная рамка с помощью CSS
Свойство background достаточно универсально и позволяет установить несколько фонов и задать их параметры. Так что делаем два фона: один с градиентом, другой сплошной черный в виде градиента и накладываем их друг на друга
👉 @FrontendPortal | #CSS
Свойство background достаточно универсально и позволяет установить несколько фонов и задать их параметры. Так что делаем два фона: один с градиентом, другой сплошной черный в виде градиента и накладываем их друг на друга
.element {
border: 12px solid transparent;
border-radius: 24px;
background:
/* padding-box, чтобы он не рисовался под рамкой */
linear-gradient(black, black) padding-box,
/* border-box, чтобы он начинался под рамкой */
linear-gradient(
45deg,
#FF52E5,
#F6D242
) border-box;
}👉 @FrontendPortal | #CSS