How to Design Cut-out Border Design using CSS

box with background image

Hello friends today we gonna learn about How to Design Cut-out Border Design using CSS. So read this article, How to Design Cut-out Border Design using CSS step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

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.

back to menu ↑

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

relative to the width of the viewporthence the use of the VW unit (you can also use fixed units if you want).

.cb {–w: 35vw; –H: 40vw; –B: 4vw; –B2: calc (var (–b) * 2);}

Brief explanation – VW and VH units

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:

back to menu ↑

Format the background image

We need the background image cover the whole area of ​​the

including the border area, so the background image must be format accordingly

If you want to make the background image a fixed size, make sure the size you specify will also include the border area of ​​the

covered. As for the code used in the post so far, here’s the background value I’m giving it:

.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; height: var (–h); width: var (–w);}

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:

box with background image

back to menu ↑

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.

box with background image

back to menu ↑

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

box with box shade

back to menu ↑

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

to reach this goal.

.poster1 {–tbgc: rgba (0,120,237, .5); background image: url (“http://bit.ly/2eQBij2”);}

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);}

back to menu ↑

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;}}

code for portrait mode

Note: Do not forget it add the viewport meta tag to your HTML page if you’ve decided to optimize it for mobile vision.

back to menu ↑

How to Design Cut-out Border Design using CSS: benefits

  • The How to Design Cut-out Border Design using CSS tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the How to Design Cut-out Border Design using CSS guide is free.

back to menu ↑

Faq

Tutorial summary of How to Design Cut-out Border Design using CSS

In this guide, we told you about the How to Design Cut-out Border Design using CSS; please read all steps so that you understand How to Design Cut-out Border Design using CSS in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the How to Design Cut-out Border Design using CSS, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the How to Design Cut-out Border Design using CSS tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


back to menu ↑

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
Logo
Shopping cart