[Resolved] How to create half-border in a div?

Home Forums Support How to create half-border in a div?

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #986646
    Ravi Dixit

    hey there,
    l am creating table of content for my blog posts.
    and i want to add a half-border around the div. something like this https://postimg.cc/S2R1vD44

    can you help me out?
    Thanks
    Bitu Rauth

    #986689
    David
    Staff
    Customer Support

    Hi there,

    So some CSS like this:

    .element-class {
    	position: relative;
    }
    
    .element-class:before, .element-class:after {
        content: '';
        display: block;
        position: absolute;
        background-color: transparent;
        pointer-events: none;
    }
    
    .element-class:before {
        top: 0;
        left:0;
        right: 60%;
    	bottom: 80%;
        border-top: 4px solid red;
        border-left: 4px solid red;
    }
    
    .element-class:after {
    	top: 80%;
        left: 60%;
        right: 0;
        bottom: 0;
        border-bottom: 4px solid red;
        border-right: 4px solid red;
    }

    Give your DIV a class of whatever your want, and swap it for the .element-class in the CSS above.

    #986696
    Ravi Dixit

    Thanks man it works…

    #986700
    David
    Staff
    Customer Support

    Awesome – glad to be of help

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.