Border radius не работает с градиентом

Border Gradient with Border Radius

I have the following CSS:-

Adding border-radius: 5px doesn’t seem to do anything, I figured it’s because I’m using border gradient, is there a way for me to achieve the desired 5px border radius at all?

2 Answers 2

2021: I recommend using the CSS mask version since the support is pretty good now

You cannot use border-radius with gradient. Here is another idea where you can rely on multiple background and adjust the background-clip :

If you want transparency, you can consider SVG like below:

That you can apply as background:

And the same way as mask where you can get the gradient outside of the SVG:

You can also use it as common element and consider position:absolute to place it around the text:

Here is a different idea with CSS using mask where you will have transparency and it will also be responsive:

With CSS variables, we can make it easy to adjust:

The above examples cover also the circle shape:

Related question in case you want to apply an animation to the border: Button with transparent background and rotating gradient border

Источник

Градиент границы вместе с Border Radius

У меня есть следующий CSS:

Добавление border-radius: 5px , похоже, ничего не изменяет.
Может это происходит потому что, я использую градиент border.
Есть ли способ вообще достичь желаемого радиуса border 5px?

1 ответ 1

Вы не можете использовать border-radius с градиентом.

• Вот еще одна идея, в которой вы можете использовать несколько фонов и настраивать background-clip :

• Если вам нужна прозрачность, вы можете рассмотреть применение SVG, как показано ниже:

• Вы также можете применить в качестве фона:

• И так же использовать маску, где вы можете получить градиент за пределами SVG:

• Вы также можете использовать его как общий элемент и рассмотреть position: absolute , чтобы разместить его вокруг текста:

• Вот другая, сложная идея с CSS, с использованием маски и нескольких фонов, где у вас будет прозрачность, а также она будет отзывчивой:

• С помощью переменных CSS мы можем упростить настройку:

• Приведенные выше примеры охватывают форму круга, но мы можем рассмотреть более простой код для получения градиента по кругу:

Всё ещё ищете ответ? Посмотрите другие вопросы с метками css svg border градиент или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.10.18.40487

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

Border with gradient and radius

We all know the property border-image that allow us to add any kind of images (including gradients) as borders.

Exit fullscreen mode

Unfortunately, border-radius isn’t supported with border-image and it’s painful to find tricks to obtain rounded borders having a gradient.

Here is a trick that will produce such result. No complex code, No SVG or multiple elements are required! only two lines of CSS code using the mask property.

Exit fullscreen mode

Explanation

(1)(2): Those lines are trivial.
(3): We apply a gradient as background and we make its origin the border box (by default it’s the padding box).
(4): Using mask we apply two opaque layers. The bottom one will cover all the element and the top one will cover only the padding box (so it will not cover the border area)
(5): We exclude the top layer from the bottom one and only the border area will be shown!
(5′): Some browsers still doesn’t support mask-composite so we use the prefixed version and destination-out is an equivalent of exclude

That’s it!

Now you can adjust the border, gradient and radius like you want. The only drawback is that this will mask the content so we can move the code to a pseudo element instead

Exit fullscreen mode

I replaced border with padding to make the code shorter but the logic remain the same: we exclude the content area from the padding area so only padding will remain visible

Источник

Possible to use border-radius together with a border-image which has a gradient?

I’m styling an input field which has a rounded border (border-radius), and attempting to add a gradient to said border. I can successfully make the gradient and the rounded border, however neither work together. It’s either rounded with no gradient, or a border with a gradient, but no rounded corners.

Is there anyway to have both CSS properties work together, or is this not possible?

10 Answers 10

This is possible, and it does not require extra markup, but uses an ::after pseudo-element.

It involves putting a pseudo-element with a gradient background below and clipping that. This works in all current browsers without vendor prefixes or hacks (even IE), but if you want to support vintage versions of IE, you should either consider solid color fallbacks, javascript, and/or custom MSIE CSS extensions (i.e., filter , CSSPie-like vector trickery, etc).

The extra styling above is to show:

• This works with any background
• It works just fine with box-shadow , inset or not
• Does not require you to add the shadow to the pseudo-element

Again, this works with IE, Firefox and Webkit/Blink browsers.

Working on this same problem. Came across a non-svg solution which is more succinct than others here:

Probably not possible, as per the W3C spec:

A box’s backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.

This is likely because border-image can take some potentially complicated patterns. If you want a rounded, image border, you’ll need to create one yourself.

Источник

Блог Vaden Pro

Особенности работы свойства border-radius

В статье описаны особенности применения свойства border-radius. Также представлены проблемы в отображении для разных браузеров и предложены возможные варианты их решения.

С выходом новой версии CSS3 решилась одна из самых сложных проблем в веб-дизайне. В новой версии продукта появилось новое свойство border-radius, с помощью которого можно легко округлять углы блока там, где это необходимо. Теперь верстальщики могут забыть о трудоемких процессах реализации такого простого решения, как скругление углов через тот же photoshop.

Однако, как оказалось, не все браузеры были готовы к выходу новинки от CSS3. Некоторые из них не совсем корректно обрабатывают скругление, на лицо недоработки и промахи.

Проблемы с webkit-браузерами

Проведя тестирование на разных браузерах мы обнаружили один не очень приятный эффект при отработки свойства в webkit-браузерах. Для наглядности рассмотрим, как выводит скругление Firefox и Chrome:

Глядя на картинку в первую очередь можно отметить, что Firefox более плавно обрабатывает скругление, Chrome отрисовывает слегка угловатый полукруг. Также мы видим, что у хрома установленная рамка в некоторых местах просвечивается и видно заливку заднего фона.

Ввиду этого необходимо расставить приоритеты при создании сайта. Либо следует отдать предпочтение простоте кода и быстрой загрузке веб страницы, что реализуется в случае использования border-radius, либо делаем уклон на красоту и аккуратность, что легко достигается при использовании бекграундных картинок.

Стоит обратить внимание на то, что такие проблемы имеют место в старых версиях браузеров. В последних версиях такой недочет исправлен.

Проблемы скруглений изображения

В браузерах в той же степени могут возникнуть проблемы с применением свойства скругления углов как непосредственно к самой картинке, так и к ее родителю. Чтобы было понятно, привожу пример кода:

Ожидали увидеть скругленную картинку с красной рамкой, а видим

Однако, аналогично прошлому случаю, этой проблемой болеет поколение браузеров, которые постарше. Их потомки справляются отлично с таким кодом и свойство срабатывает как надо.

Выход из ситуации

Первое, что приходит в голову для того, чтобы решить эту проблему – это применить скругление углов не только для родителя, но и непосредственно к самой картинке. Причем, многие верстальщики поддерживают такую идею, я не раз натыкался на такое предложение в соответствующих форумах. Итак, записываем код:

Обращаю Ваше внимание на то, что содержимое блока требуется скруглять на 1 пиксель меньше, чтобы достичь полного единства рамки родителя и скругления потомка.

Еще одно решение

Второй способ, который, как показывает практика, является более действенным, заключается в помещении картинки на задний фон. То есть картинку мы будем выводить не посредством HTML-кода, а через CSS-правила, воспользовавшись свойством background. Однако следует отметить тот факт, что такой способ является хуже с точки зрения семантики, однако при отсутствии других более лучших вариантов выхода у нас нет.

Итак, вот код этого решения:

Теперь убедимся, что наш способ работает, пропускаем код через браузер

В каких браузерах работает?

Стоит отметить, что выход нового свойства в CSS3 значительно облегчил работу многим программистам. Однако, некоторые браузеры технически не были готовы к такому новшеству. Это выразилось в том, что одни из них некорректно осуществляли скругления, а другие не могли синхронизировать эффект между родителями и потомками. Но несмотря на это, с выходом новых версий браузеров постепенно разработчики исправили все свои недочеты, за что им отдельно спасибо. Сейчас в работе с border-radius не возникает практически никаких проблем.

Источник