Вы можете применить border-radius к HTML-элементу и обнаружить, что эффект drop-shadow следует за округленными границами.
Здесь пример:
```html
<style>
.shadow {
height: 100px;
width: 100px;
border-radius: 50%; /* Здесь устанавливается округлённые границы */
box-shadow: 10px 10px 5px grey;
}
</style>
<div class="shadow"></div>
```
В этом примере у фигуры будет круглый элемент с эффектом drop-shadow.
Однако, если вы хотите установить border-radius только на drop-shadow, не изменяя форму элемента, вы могли бы обойти это с помощью псевдоэлементов и применения фильтра drop-shadow к родительскому элементу, а не к псевдоэлементу. Это может быть сложнее и не всегда идеально подходит для всех сценариев.
Пример:
```html
<style>
.shadow-parent {
display: inline-block;
border-radius: 50%;
filter: drop-shadow(10px 10px 5px grey);
}
.shadow-parent::before {
content: "";
display: block;
padding-bottom: 100%; /* создаёт квадратный элемент */
}
</style>
<div class="shadow-parent"></div>
```
В этом примере с помощью псевдоэлемента форма HTML-элемента никак не изменяется, но тень всё равно округлена.