Apply image or gradient as border

HTML

<!-- =============================================
  ARQUIVO 1: /tools/vazao-vru.html  (salve com .html)
  Esta versão calcula e exibe em LITROS POR MINUTO (L/min).
  COMO INCORPORAR:
  <iframe src="/tools/vazao-vru.html" width="100%" height="900" style="border:none"></iframe>
================================================== -->
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Calculadora de Vazão por Bico | Zanoni Equipamentos</title>
  <link rel="preconnect" href="https://cdnjs.cloudflare.com">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
  <style>
    :root{
      --primary:#eab308;      /* amarelo institucional */
      --primary-dark:#c59d07; /* hover */
      --accent:#003366;       /* azul */
      --light:#fff8d2;        /* destaque */
    }
    body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.5;color:#333;background:#fafafa;margin:0}
    h1{color:var(--accent);text-align:center;margin:1.5rem 0}
    .container{max-width:960px;margin:0 auto;padding:1rem}
    label{display:block;margin-top:1rem;font-weight:600;color:var(--accent)}
    input{padding:.45rem .7rem;width:100%;max-width:160px;border:1px solid #ccc;border-radius:.35rem;font-size:1rem}
    .form-row{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end}
    button{background:var(--primary);color:var(--accent);border:none;padding:.6rem 1.3rem;border-radius:.35rem;font-weight:600;cursor:pointer;margin-top:1.5rem;font-size:1rem}
    button:hover{background:var(--primary-dark)}
    h2{color:var(--accent);margin-top:2.5rem}
    table{width:100%;border-collapse:collapse;margin-top:1rem;font-size:0.95rem}
    th,td{padding:.55rem .4rem;border:1px solid #dadada;text-align:center}
    th{background:var(--primary);color:var(--accent)}
   ...