Чтобы создать градиент с закругленными краями, вам нужно будет использовать свойство `border-radius` для элемента, к которому вы хотите применить градиент. Давайте добавим это в ваш CSS для элемента `.gradient`.
Вот обновленный CSS из вашего JSBin, который добавит закругленные края к вашему градиенту:
```css
.gradient {
width: 200px;
height: 200px;
background: linear-gradient(to right, #ff7e5f, #feb47b);
border-radius: 20px; /* Это свойство добавит закругление углов */
}
```
Вы можете изменить значение `20px` на то, которое вам нужно, чтобы получить желаемый радиус закругления. Чем больше значение, тем более скругленным будет угол.
Не забудьте сохранить свои изменения в JSBin, чтобы увидеть результат в реальном времени.
Обновленный пример будет выглядеть примерно так:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.gradient {
width: 200px;
height: 200px;
background: linear-gradient(to right, #ff7e5f, #feb47b);
border-radius: 20px; /* Добавлено для скругления углов */
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
```
Если вы хотите видеть закругленные края только в определенных углах элемента, вы также можете указать радиус для каждого угла отдельно, используя свойства вроде `border-top-left-radius`, `border-top-right-radius`, `border-bottom-right-radius` и `border-bottom-left-radius`.
