Guide: How to Design Cut-out Border Design using CSS
Right away cut out edge design we can show users what can be found below the boundary of an HTML elementThis task is usually solved by stacking of two or more block elements (divs in most cases) of different sizes on top of each other. First, this seems like an effortless solution, but it gets more frustrating if you want to reuse the layout multiple times, move the elements, optimize the design for mobile, or maintain the code. In this post, I’ll show you an elegant CSS solution that uses only one HTML element to achieve the same effect. This technique is also great for accessibility, as the loads the background image into the CSS, separated from the HTML. You will know at the end of this post how to display a background image in the border area to cut out edge design you can see below. I’ll also show you how to make the design responsive using viewport units See Compsmag’s Pen CSS Cutout Border (@hkdc) on CodePen.
First code
The only requirement on the HTML front is one block element
We will have to reuse the dimensions (width and height) and border width values of the div, so I introduce them as CSS variablesThe variable –w returns the width of the .cb block element, –h returns its height, –B applies to the boundary width, and –b2 for the border width multiplied by 2. We will see the use of the last variable later. I size the The unit vw represents the 1 / 100th of the width of the viewportFor example, 50vw is 50 parts of a viewport width cut vertically into 100 equal parts, while 50vh is 50 parts of a viewport height cut horizontally into 100 equal parts Let’s improve the above code by adding a background and setting the border, height and width by using our predefined CSS variables .cb {–w: 35vw; –H: 40vw; –B: 4vw; –B2: calc (var (–b) * 2); background: url (bg.jpg); border: var (–b) solid transparent; height: var (–h); width: var (–w);} Here’s what the demo should look like now:
Format the background image
We need the background image cover the whole area of the The width of the background image [calc(var(–w) + var(–b2))] is the sum of the width of the div [var(–w)] and the width of the left and right boundaries [var(–b2)] Likewise it is height of the background image [calc(var(–h) + var(–b2))] is the sum of the height of the div [var(–h)] and the width of the top and bottom edges [var(–b2)] In this way, we reduced the background image to an area equal to the size of the div (including the border area) The central keyword aligns the background image to the center of the div. Note: If you’re adding padding to the div, don’t forget include the fill area also to the background size, the same as the border area. This is what we have now:
Cover the exclusive border area
Now that we’ve covered the border area with the background image, all that’s left is cover the center part on the inside of the brim (border-exclusive area) with a solid color, for which we reach for one box-shadow inset .cb {–w: 35vw; –H: 40vw; –B: 4vw; –B2: calc (var (–b) * 2); background: url (bg.jpg) center / calc (var (–w) + var (–b2)) calc (var (–h) + var (–b2)); border: var (–b) solid transparent; box-shadow: inset var (–w) 0 0 rgba (0,120,237, .5); height: var (–h); width: var (–w);} The horizontal shadow with value var (–w) takes up the entire width of the divUsing the rgba color feature makes this possible some transparency in the mix, but you can also use an opaque color if you want to cover the center area completely.
Add an extra border with box shade
In the Codepen demo you should see a white border around the image. There is a famous one trick from use box shadows to create multiple borders– we can use the same technique to add one or more solid colored borders to our design. The updated box shadow value is: .cb {–w: 35vw; –H: 40vw; –B: 4vw; –B2: calc (var (–b) * 2); background: url (bg.jpg) center / calc (var (–w) + var (–b2)) calc (var (–h) + var (–b2)); border: var (–b) solid transparent; box-shadow: inset var (–w) 0 0 rgba (0,120,237, .5), 0 0 0 calc (var (–b) / 2) white; height: var (–h); width: var (–w);} The calc function (var (–b) / 2) creates a shadow of the half the border width
Optional: separate layout and aesthetics
In my final Codepen demo, I put the code for the background image and the box-shadow color in a separate classroomThis is optional, but can be very useful if you want reuse the layout of the cut-out border design in multiple elements, adding the aesthetics (background image + color) for each element separately. I’ve added a class called .poster1 to the Since background is an abbreviated property, the properties handheld can be individually overwritten / setTherefore, we can set background-image in .poster1 and remove url value from background property in .cb. To set the value of the box-shadow we can use another CSS variableThe variable –tbgc contains the color value we want to give the box-shadow (light blue in the demo), so under the style rules for .cb we replace the color value of the box-shadow property with var (–tbgc) .cb {–w: 35vw; –H: 40vw; –B: 4vw; –B2: calc (var (–b) * 2); background: center / calc (var (–w) + var (–b2)) calc (var (–h) + var (–b2)); border: var (–b) solid transparent; box-shadow: inset var (–w) 0 0 var (–tbgc), 0 0 0 calc (var (–B) / 2) white; height: var (–h); width: var (–w);}
Portrait mode code
Since the dimensions are all in the unit vw, it will be seem too small when viewing the design in portrait mode (smaller width in relation to height) – and all that mobile devices are enabled by default. To solve this problem, switch vw with vh, and resize the design as you see fit for portrait modes. @media (orientation: portrait) {.cb {–w: 35vh; –H: 40vh; –B: 4vh;}}
Note: Do not forget it add the viewport meta tag to your HTML page if you’ve decided to optimize it for mobile vision.
How to Design Cut-out Border Design using CSS: benefits
Faq
Final note
I hope you like the guide How to Design Cut-out Border Design using CSS. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends. For our visitors: If you have any queries regards the How to Design Cut-out Border Design using CSS, then please ask us through the comment section below or directly contact us. Education: This guide or tutorial is just for educational purposes. Misinformation: If you want to correct any misinformation about the guide “How to Design Cut-out Border Design using CSS”, then kindly contact us. Want to add an alternate method: If anyone wants to add more methods to the guide How to Design Cut-out Border Design using CSS, then kindly contact us. Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off). Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel. Compsmag has Proudly Shared Free Information Since 2014.
