CSS para implementar el estilo de borde de cuatro esquinas.

El efecto es como se muestra en la figura
Esta imagen solo implementa los estilos de las esquinas inferior izquierda e inferior derecha
Lo mismo ocurre con la esquina superior derecha y arriba a la izquierda

/*  容器 */
.card-mini {
  position: relative;
}
/*  左下*/
.card-mini::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  border-bottom: 2px solid #253d64;
  border-left: 2px solid #253d64;
  border-bottom-left-radius: 10px;
}
/*  右下*/
.card-mini::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  border-bottom: 2px solid #253d64;
  border-right: 2px solid #253d64;
  border-bottom-right-radius: 10px;
}

Superior derecha y superior izquierda. Cambiar de abajo a arriba.

.card-mini::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-top: 2px solid #253d64;
  border-left: 2px solid #253d64;
  border-top-left-radius: 10px;
}
.card-mini::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-top: 2px solid #253d64;
  border-right: 2px solid #253d64;
  border-top-right-radius: 10px;
}