How to Make CSS Clip Path Border

by
Make CSS Clip Path Border

In this post, we’ll learn how to make css clip path border. I got this idea from a Codepen user named Bennett Feely, created in JANUARY 14, 2015. We’ll dissect the code step by step, with a spotlight on the clip-path property and its polygon values. By the end of this guide, you’ll not only have a clear understanding of how to implement this unique border effect but also appreciate the versatility and potential of the clip-path property in CSS.

Basic Structure of Clip Path Border

The developer began by creating a basic structure in HTML. In this structure, he introduced two div elements. The first one is an outer div labeled as .outside, and nestled within it is the second div, aptly named .inside. This arrangement can be visualized as a frame (outside) with a picture (inside) placed within it.

<div class="outside">
 <div class="inside"></div>
</div>
HTML

Shaping the Outer Frame (outside)

For the .outside div:

  • The developer defined its dimensions using width and height.
  • He chose a tomato shade to fill this div, making it stand out.
  • The standout feature here is the use of clip-path. This property allows the developer to sculpt or “clip” the element into a distinct shape. In this instance, a polygon shape was chosen to grant the frame its unique appearance.
.outside {
 position: relative;
 width: 70vmin;
 height: 70vmin;
 background: tomato;
 -webkit-clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
 clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
}
CSS

Output:

Clip path box

Related Post

Positioning the Inner Element (inside)

For the .inside div:

  • The developer utilized position: absolute; to ensure it snugly fits within the .outside div.
  • To create a semblance of a border, he nudged it slightly away from the edges using properties like top, left, right, and bottom, all set to 10px.
  • A white background was chosen to contrast against the outer div’s tomato hue.
  • To maintain consistency in design, the same clip-path used for the outer div was applied to the inner div. This ensures that both divs share the same unique shape, but the inner one appears slightly smaller due to the positioning, creating a border effect.
.outside {
 position: relative;
 width: 70vmin;
 height: 70vmin;
 background: tomato;
 -webkit-clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
 clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
}
CSS

Output:

CSS clip-path border

If you’re interested in downloading the source code, just click the button 🔘 below 👇. It’s as simple as that!

Live Demo Download

We certainly hope that you’ve found this post both insightful and practical. We’ve strived to deliver detailed, user-friendly content that will assist you in mastering it. Should you have any further questions, curiosities, or if there’s anything you’re unsure about, please don’t hesitate to drop a comment. Your engagement is extremely valuable to us and our community. We promise to read every single comment and respond as soon as we can. It’s our aim to make sure you’re never left hanging with a question, as we’re more than eager to assist you in broadening your knowledge.

Leave a Comment