Can border be applied to a clipped element along the clip path?

No, adding border property to the clipped element would not apply the borders along the clipped path because the border is applied to the original rectangle (or square) container before the clip-path is applied and so, it also gets clipped out.

Are there any alternate ways to create such a border effect?

We can mimic it by applying the same clip-path on a container element. The container element’s background color will look as though it is the border of the inner element because both are clipped and the container has slightly higher dimensions than the inner element.

Example: 

 

Advertisements