curl --request POST \
  --url https://api.iotools.cloud/v1/tool/css-border-style-generator \
  --header 'Authorization: Bearer <token>' \
  --header 'Content-Type: application/json' \
  --data '
{
  "bgColor": "#ffffff",
  "edgeColor": "#6366f1",
  "topEnabled": "true",
  "topStyle": "zigzag",
  "topSize": "24",
  "topAmplitude": "12",
  "rightEnabled": "",
  "rightStyle": "wavy",
  "rightSize": "24",
  "rightAmplitude": "12",
  "bottomEnabled": "true",
  "bottomStyle": "zigzag",
  "bottomSize": "24",
  "bottomAmplitude": "12",
  "leftEnabled": "",
  "leftStyle": "wavy",
  "leftSize": "24",
  "leftAmplitude": "12",
  "className": "io-border-box"
}
'

{
  "tool": "css-border-style-generator",
  "tool_version": "1.0.2",
  "outputs": {
    "cssCode": ".io-border-box {\n  position: relative;\n  overflow: hidden;\n  background: #ffffff;\n}\n\n.io-border-box__top {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  height: 12px;\n  background: #6366f1;\n  -webkit-mask-image: linear-gradient(to bottom right, #000 50%, transparent 50%), linear-gradient(to bottom left, #000 50%, transparent 50%);\n  mask-image: linear-gradient(to bottom right, #000 50%, transparent 50%), linear-gradient(to bottom left, #000 50%, transparent 50%);\n  -webkit-mask-size: 12px 12px, 12px 12px;\n  mask-size: 12px 12px, 12px 12px;\n  -webkit-mask-repeat: repeat-x;\n  mask-repeat: repeat-x;\n  -webkit-mask-position: 0px 0px, 12px 0px;\n  mask-position: 0px 0px, 12px 0px;\n}\n\n.io-border-box__bottom {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: 12px;\n  background: #6366f1;\n  -webkit-mask-image: linear-gradient(to top right, #000 50%, transparent 50%), linear-gradient(to top left, #000 50%, transparent 50%);\n  mask-image: linear-gradient(to top right, #000 50%, transparent 50%), linear-gradient(to top left, #000 50%, transparent 50%);\n  -webkit-mask-size: 12px 12px, 12px 12px;\n  mask-size: 12px 12px, 12px 12px;\n  -webkit-mask-repeat: repeat-x;\n  mask-repeat: repeat-x;\n  -webkit-mask-position: 0px 0px, 12px 0px;\n  mask-position: 0px 0px, 12px 0px;\n}",
    "htmlCode": "<div class=\"io-border-box\">\n  <div class=\"io-border-box__top\"></div>\n  <div class=\"io-border-box__bottom\"></div>\n</div>",
    "previewHtml": "<div style=\"position:relative;overflow:hidden;width:260px;height:180px;background:#ffffff;\"><div style=\"position:absolute;top:0;right:0;left:0;height:12px;background:#6366f1;-webkit-mask-image:linear-gradient(to bottom right, #000 50%, transparent 50%), linear-gradient(to bottom left, #000 50%, transparent 50%);mask-image:linear-gradient(to bottom right, #000 50%, transparent 50%), linear-gradient(to bottom left, #000 50%, transparent 50%);-webkit-mask-size:12px 12px, 12px 12px;mask-size:12px 12px, 12px 12px;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-position:0px 0px, 12px 0px;mask-position:0px 0px, 12px 0px;\"></div><div style=\"position:absolute;right:0;bottom:0;left:0;height:12px;background:#6366f1;-webkit-mask-image:linear-gradient(to top right, #000 50%, transparent 50%), linear-gradient(to top left, #000 50%, transparent 50%);mask-image:linear-gradient(to top right, #000 50%, transparent 50%), linear-gradient(to top left, #000 50%, transparent 50%);-webkit-mask-size:12px 12px, 12px 12px;mask-size:12px 12px, 12px 12px;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-position:0px 0px, 12px 0px;mask-position:0px 0px, 12px 0px;\"></div></div>"
  },
  "credits_used": 5,
  "credits_remaining": null
}