디자인 아틀라스
EN
✦ 시각 효과

outline-offset 응용

outline-offset effects

outline 은 border 와 달리 박스 모델에 안 잡혀 레이아웃을 밀지 않습니다. outline-offset 으로 그 선을 테두리 안팎 어디로든 띄울 수 있습니다.

다른 이름: Focus ring offsetNon-layout border
···
html
<div class="wrap"><div class="box" id="box"></div><div class="label" id="l">outline-offset: 8px</div></div>
css
.wrap{position:relative;display:grid;place-items:center;gap:20px}
.box{width:24vmin;max-width:100px;aspect-ratio:1;border-radius:12px;background:linear-gradient(135deg,#5b5bf7,#18c29c);
  outline:3px solid #f25c8a;outline-offset:8px}
.label{font:600 12px/1.4 monospace;color:var(--muted)}
js
const box = document.getElementById('box');
const l = document.getElementById('l');
let t = 0;
function loop(){
  t += 0.02;
  const off = Math.round(8 + Math.sin(t) * 18);
  box.style.outlineOffset = off + 'px';
  l.textContent = 'outline-offset: ' + off + 'px';
  requestAnimationFrame(loop);
}
loop();

border 를 늘리면 요소가 커지거나 옆 요소가 밀려나지만, outline 은 박스 모델에 참여하지 않아 아무리 두껍게 줘도 주변 레이아웃이 그대로입니다. outline-offset 은 그 선을 border 가장자리에서 얼마나 띄울지 정하는데, 양수면 바깥으로, 음수면 안쪽으로 파고듭니다.

이 특성 때문에 포커스 링에 자주 씁니다 — 키보드로 포커스가 옮겨갈 때마다 border 를 바꾸면 다른 요소들이 미세하게 흔들리지만(리플로우), outline 은 그런 부작용이 없습니다.

border-radius 가 있는 요소는 최신 브라우저에서 outline 도 그 모서리를 따라 둥글게 그려지지만, 오래된 엔진에서는 outline 이 그냥 사각형으로 남아있던 시절이 있었으니 둥근 모서리에 크게 의존한다면 확인이 필요합니다. 또 outline 이 offset 때문에 조상의 경계 밖으로 나가면, 그 조상에 overflow: hidden 이 걸려 있을 경우 box-shadow 의 번짐과 달리 그대로 잘려 나갑니다.

언제 쓰나

포커스 링, 레이아웃을 흔들면 안 되는 "선택됨" 표시에 씁니다. 조상에 overflow: hidden 이 있으면 offset 값이 잘리지 않는지 확인하세요.