Creating Irregular Shapes with CSS Outline and Clip-Path

Introduction

In CSS you can create irregular shapes using various techniques such as the classic border‑triangle method or the powerful clip-path property; the following example shows how a single line of CSS can produce a complex polygon.

clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%)

More examples are available at bennettfeely.com/clippy/ .

Outline

The outline property draws a line around an element outside its border and can be customized with outline-color , outline-width , and outline-style . Unlike border , an outline does not occupy space and is usually rectangular, though non‑rectangular outlines are allowed.

Irregular Borders

<span>
    我是outline<br />
    我可以创建非矩形<br />
    的边框
</span>

span {
  outline: 1px dashed red;
}

Double Border

Setting outline-style to double and adding an outline-offset creates a double‑border effect; a positive offset pushes the outline outward, while a negative offset pulls it inward.

outline: 12px double rgb(241, 130, 130);
outline-offset: 5px;

Creating Polygons with outline-style:dotted

By using a thick dotted outline and a negative offset, the dots can be positioned half inside and half outside the element, forming a polygonal pattern. The example sets a 200 px box with a 40 px dotted outline and a –20 px offset, producing four dots per side.

.outline-double {
    background-color: #80f0f0;
    outline: 40px dotted rgb(255, 1, 1);
    outline-offset: -20px;
}

Changing the outline color to white yields the final effect.

Polygon 2

Switching to outline-style:dashed creates straight‑edged polygons. With a white outline the result is shown in the following images.

Conclusion

The outline property offers many interesting possibilities beyond the usual border usage; although it is less common, it can replace borders in certain scenarios. For more details see the article “The Little Brother of Border: Irregular Outline”.