HTML input border-image with svg not working

Question

I'm trying to add image border to input field using image-border options but it's doesn't show me the SVG image as a border.

Any ideas why?

#inputCode{
   position: absolute;
   top: 35%;
   left: 50%;
   width: 745px;
   border-image: url(../images/white_rubrick.svg);
   font-size: 50px;
   text-align: center;
   background-color: transparent;
   color: white;
   transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
}

<input 
      type="text" 
      name="inputCode" 
      id="inputCode" 
      size="8"
      maxlength="8" 
      autofocus 
      placeholder="PUT YOUR CODE HERE" 
      style="text-transform:uppercase"/>

Expected:

The problem:

You don't have enough parameters in your border image statetement - https://developer.mozilla.org/en-US/docs/Web/CSS/border-image — Paulie_D, Aug 09 '19 at 13:52
you need to also define a border-style (related: https://stackoverflow.com/a/56915094/8620333) — Temani Afif, Aug 09 '19 at 14:02

score 1 · Accepted Answer · edited Aug 10 '19 at 07:21

Why do you want it to be an image? Isn't it better to generate the expected with code only? I mean using -webkit-appearance: none;

.code-input {
  -webkit-appearance: none;
  width: 250px;
  height: 30px;
  background: #fff;
  color: #000;
  font-weight: bold;
  border: 3px solid #000;
  border-radius: 30px;
  text-align: center;
}

<input class="code-input" value="Put your code here" />

score 0 · Answer 2 · edited Aug 09 '19 at 14:25

0

Try changing the CSS to this:

#inputCode{
    position: absolute;
    top: 35%;
    left: 50%;
    width: 745px;
    border-image: url(./border.svg) 25% repeat;
    border-width:25px;
    font-size: 50px;
    text-align: center;
    background-color: transparent;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
  }

<input 
    type="text" 
    name="inputCode" 
    id="inputCode" 
    size="8"
    maxlength="8" 
    autofocus 
    placeholder="PUT YOUR CODE HERE" 
    style="text-transform:uppercase"/>

edited Aug 09 '19 at 14:25

kiner_shah

3,939
7
23
37

answered Aug 09 '19 at 13:53

Charlene Vas

723
1
9
21

Welcome to SO, your input is appreciated! Please edit your answer so that it (a) put the answer into context, (b) explains what (changes) you did. – B--rian Aug 09 '19 at 14:05

score 0 · Answer 3 · edited Aug 09 '19 at 15:42

Add border-radius to the desired px -

#inputCode {
   position: absolute;
   top: 35%;
   left: 50%;
   width: 500px;
   border-image: url(../images/white_rubrick.svg);
   border-radius: 30px;
   font-size: 20px;
   text-align: center;
   background-color: transparent;
   color: white;
   transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
}

<input 
      type="text" 
      name="inputCode" 
      id="inputCode" 
      size="8"
      maxlength="8" 
      autofocus 
      placeholder="PUT YOUR CODE HERE" 
      style="text-transform:uppercase"/>

score 0 · Answer 4 · answered Aug 09 '19 at 14:07

0

Change border-image: url(../images/white_rubrick.svg); to border-image: url(../images/white_rubrick.svg) 20% round;. If this does not work, try changing 20% round to 30% or 50% round.

answered Aug 09 '19 at 14:07

SK73106

201
1
9

HTML input border-image with svg not working

4 Answers4