How to create Textbox Hexagon border?

Question

• i want to set textbox border like hexagon
• i have design to create something like that. My code:

#example1 {
  border: 2px solid red;
  padding: 10px;
  border-radius: 25px;
}

<div id="example1">
  <p>The border-radius property defines the radius of the element's corners.</p>
</div>

Answer 1

Here is an idea with multiple background. Code taken from my online generator: https://css-generators.com/custom-corners/

input {
  --c: red;

  width:300px;
  height:50px;
  padding:5px;
  box-sizing:border-box;
  border:none;
  outline:0;
  background:
    linear-gradient( 45deg,#0000 9.90px, var(--c) 0 calc(9.90px +  3px), #0000 0 calc(100% - 9.90px -  3px), var(--c) 0 calc(100% - 9.90px), #0000 0),
    linear-gradient(-45deg,#0000 9.90px, var(--c) 0 calc(9.90px +  3px), #0000 0 calc(100% - 9.90px -  3px), var(--c) 0 calc(100% - 9.90px), #0000 0),
    linear-gradient(90deg ,var(--c) 6px,#0000 0) -3px 50%/100% calc(100% - 28px) repeat-x,
    linear-gradient(180deg,var(--c) 6px,#0000 0) 50% -3px/calc(100% - 28px) 100% repeat-y
}

<input type="text">