The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Applying a SVG border on an input element?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #269034


    First, please excuse my poor english.

    Second, I have some stupid question in my mind.

    How can a border of an ““ HTML element be replaced by some (irregular) SVG border? And how to make it responsive?

    This link for a better understanding:


    You should be able to do this, can’t you just apply it as a background of the input?

    It would be responsive by just filling the input so it would do whatever they are doing if that makes sense.


    add a class to the inputs …

     <input id="name" class="brd" name="s" value="" type="text">

    add css for the border, with a link to your svg file?

      border: 10px solid black;
      height: 10vh;
      width: 100vh;
      border-image: url("") 30;
      box-shadow: 1px 1px 3px black inset;

    Thanks guys and thank Xiija for your help.

    But, by applying these CSS rules, it’s doesnt exactly match what I’m expected to: the border-image property surrounds the input’s border but it won’t get over it.

    I’m not sure then if there is any solution with pure CSS…


    Hi companion.

    Do you want something like that ?

    There are a lot of fixed values and I did that in two minutes. But it can serve as a basis for your work.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.