Notched Outline
Material-style notched outline. The label sits inside a gap cut into the border. Subtle, professional, and works beautifully for forms with dense fields.
Notched Outline the 5th of 28 designs in the 28 CSS Input Field Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<label class="if-notch">
<span class="if-notch-label">Full name</span>
<input type="text" name="name" autocomplete="name" placeholder=" " required />
<span class="if-notch-frame" aria-hidden="true">
<span class="if-notch-l"></span>
<span class="if-notch-cut"><span>Full name</span></span>
<span class="if-notch-r"></span>
</span>
</label> .if-notch {
position: relative;
display: block;
width: 100%;
max-width: 280px;
}
.if-notch input {
width: 100%;
box-sizing: border-box;
padding: 13px 14px;
background: transparent;
border: 0;
outline: none;
color: #f0eeff;
font-size: 14px;
position: relative;
z-index: 1;
}
.if-notch input::placeholder {
color: transparent;
}
.if-notch-label {
position: absolute;
left: 14px;
top: 13px;
font-size: 13px;
color: #b8b6d4;
pointer-events: none;
transition: opacity 0.15s;
z-index: 2;
}
.if-notch input:focus ~ .if-notch-label,
.if-notch input:not(:placeholder-shown) ~ .if-notch-label {
opacity: 0;
}
.if-notch-frame {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: 12px auto 1fr;
pointer-events: none;
}
.if-notch-l,
.if-notch-cut,
.if-notch-r {
border: 1px solid rgba(46, 184, 138, 0.35);
transition: border-color 0.2s;
}
.if-notch-l {
border-right: 0;
border-radius: 8px 0 0 8px;
}
.if-notch-r {
border-left: 0;
border-radius: 0 8px 8px 0;
}
.if-notch-cut {
border-left: 0;
border-right: 0;
position: relative;
display: flex;
align-items: center;
padding: 0 6px;
}
.if-notch-cut > span {
font-size: 10px;
color: rgba(46, 184, 138, 0.85);
font-weight: 600;
background: #07070f;
padding: 0 4px;
letter-spacing: 0.06em;
text-transform: uppercase;
transform: translateY(-13px) scale(0);
transform-origin: left center;
transition: transform 0.2s ease;
}
.if-notch input:focus ~ .if-notch-frame .if-notch-cut > span,
.if-notch input:not(:placeholder-shown) ~ .if-notch-frame .if-notch-cut > span {
transform: translateY(-13px) scale(1);
}
.if-notch:focus-within .if-notch-l,
.if-notch:focus-within .if-notch-cut,
.if-notch:focus-within .if-notch-r {
border-color: #2eb88a;
}