How to Create Cut-out Border Design with CSS

One of the parts of a recent front-end project had an interesting cut-out effect. There are different ways to How to Create Cut-out Border Design with CSS, and each has its pros and cons. we thought about looking into ways to solve this problem and telling you about them.

With CSS (Cascading Style Sheets), you can make web pages that look great, but how does it work? This article explains what CSS is with a simple syntax example and also covers some key terms about the language. To understand the article, you need to know a little bit about CSS and SVG. If not, that’s fine. I’ll do my best to explain everything in detail.

How to Create Cut-out Border Design with CSS

Initial Code

We’ll need to reuse the dimensions (width & height) and border width values of the div, so I’m introducing them as CSS variables. The variable –w denotes the width of the .cb block element, –h indicates its height, –b goes for the border width, and –b2 for the border width multiplied by 2. We’ll later see the use of the last variable.

Quick explanation – vw and vh units

The unit vw represents the 1/100th of the width of the viewport. For instance, 50vw is 50 parts of a viewport width sliced vertically into 100 equal parts, while 50vh is 50 parts of a viewport height sliced horizontally into 100 equal parts.

Size the background image

We need the background image to cover the whole area of the including the border area, so the background image needs to be sized accordingly. If you want to give the background image a fixed size, just make sure the size you’re giving enables it to cover the border area of the as well. As for the code used in the post so far, here’s the background value I’m giving it:

Cover the border-exclusive area

Now that we’ve covered the border-inclusive area with the background image, all that remains is to cover the center area inside of the border (border-exclusive area) with a solid color, for which we reach for a box-shadow inset.

Add an extra border with box-shadow

In the Codepen demo, you could see a white border around the image. There’s a famous trick of using box-shadows to create multiple borders. we can use the same technique to add one or more solid colored borders to our design.

FAQ

How do I create a custom border in CSS?

Use border-style and choose a style from the list of CSS words to set the style. Use border-color and either hex, RGB, or RGBA color codes to set the color. Use the border property to set the width, style, and color all at once. Use top, right, left, and bottom.

How do I make my own border design?

1. Go to Design > Page Borders.
2. Make selections for how you want the border to look.
3. To adjust the distance between the border and the edge of the page, select Options. Make your changes and select OK.
4. Select OK.