Tutorial

Elementor Corner Caps 2 ways

Video

Description

Another question from the Facebook Global Elementor Community 🙂

The author wanted to know how to add partial borders to corners of containers/columns etc. i.e. Corner Caps.

This video shows two different ways to do this.

My preference is to use CSS classes targeting :before and :after

Using CSS Classes

Add a container to the page (Main)
Add two containers inside (Main)
Name the first "inner" container "Left column"
Set Left column padding to 3rem
Add another container inside "Left column", Name it "About"
Set "About" padding to 1rem
Add some content inside "About"
Set the classes to "corner-cap-tl corner-cap-br"
Copy the CSS below and paste into Site Settings -> Custom CSS

To change styles on a per-use basis:

On "About" go to Advanced -> Attributes

Add "style|--corner-cap-size:custom-size; --corner-cap-color: custom-color; --corner-cap-weight:custom-weight

Option 2 - Widgets

Steps 1 to 7 are the same as option 1 above.

Next steps depend on whether you use Sections/Columns or Flexbox

8. Add a Container or Spacer to the top of "About", name it "Top Left"
9. Set the Layout -> Width and Max Height to 70px
10. Set the Border style for Top and Left, Right and Bottom must be 0
11. Set Advanced -> Position to Absolute
12. Set Advanced -> Horizontal Orientation to "Left"
13. Set Advanced -> Vertical Orientation to "top"
14. Duplicate the "Top Left" Container/Widget
15. Set Advanced -> Horizontal Orientation to "Right"
16. Set Advanced -> Vertical Orientation to "bottom"
17. Set the border bottom and right, set top and left to 0

Code (click to copy)

Custom CSS (javascript)

/********************
Special Borders
 *******************/
 :root{
     --corner-cap-size: 3rem;
     --corner-cap-color: green;
     --corner-cap-weight: 2px;
 }
 
.corner-cap-tl:before{
    content: '';
    position: absolute;
    top:0;
    left: 0;
    width: var(--corner-cap-size);
    height: var(--corner-cap-size);
    border-top: var(--corner-cap-color) solid var(--corner-cap-weight);
    border-left: var(--corner-cap-color) solid var(--corner-cap-weight);
}


.corner-cap-br:after{
    content: '';
    position: absolute;
    bottom:0;
    right: 0;
    width: var(--corner-cap-size);
    height: var(--corner-cap-size);
    border-bottom: var(--corner-cap-color) solid var(--corner-cap-weight);
    border-right: var(--corner-cap-color) solid var(--corner-cap-weight);
}