Applying a SVG border on an input element?

[Chum]

Hi,

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: https://codepen.io/anon/pen/yKprmB.

[Ricky55]

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.

[Xiija]

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?

.brd
{
  border: 10px solid black;
  height: 10vh;
  width: 100vh;
  border-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/pink-doily-bdr.png") 30;
  box-shadow: 1px 1px 3px black inset;
}

[Chum]

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…

[wesh]

Hi companion.

Do you want something like that ? https://codepen.io/anon/pen/VXqOmX

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

[Author]

Posts