top and bottom angled borders css-CodePudding

How do I get this kind of border using CSS. Top and bottom have different styles of border with slight angle on the tip

I want to achieve this Result

border: 15px solid;
border-image: url(border.png) 30 / 15px / 0px stretch;

CodePudding user response：

using gradient and background:

img {
  padding: 20px 0; /* control the border size here */
  --g: grey 30%,lightblue 0; /* control the coloration here */
  background:
   linear-gradient(-45deg,var(--g)) bottom,
   linear-gradient(135deg,var(--g)) top;
  background-size: 100% 50%;
  background-repeat:no-repeat;
}

<img src="https://picsum.photos/id/1069/200/200">