Skip to main content
J
joshw50886526
Participating Frequently
October 12, 2017
Question

is this type of border possible with CSS?

  • October 12, 2017
  • 2 replies
  • 869 views

Hi,

I can handle doing a border on a div where it's just a rectangular border encompassing the div but is the type of combo border possible as in this picture?

https://s1.postimg.org/9pqkc8v5m7/css-border.jpg

Its like a rectangular border around a div and then combined with a horizontal rule that splits the rectangular div horizontally but the horizontal rule is not visible inside the div but only outside it.

I don't know if this type of border has a name or if it is possible via CSS.

    This topic has been closed for replies.

    2 replies

    pziecina
    pziecina
    Legend
    October 13, 2017

    You can create any type of border you wish, simply by using an image or even a combination of images, (different image on each side) using the css border-image property -

    https://developer.mozilla.org/en-US/docs/Web/CSS/border-image

    B i r n o u
    Community Expert
    B i r n o uCommunity Expert
    Community Expert
    October 13, 2017

    border can also be used to draw any type of arrow, very usefull in portfolio gallery or webapp

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    October 12, 2017

    It can be done, a lot of different ways with css.

    Personally I would use border and outline attributes, then do some fancy overlapping with absolute positioning and transforms...

    Here's an example (copy/paste into new document)...

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>self-contained-overlap-esque header dealy</title>

    <style>

        body {

            padding:0;

            margin:0;

        }

        .title {

            background-color:white;

            color:darkred;

            font-weight:bold;

            line-height:2em;

            text-align:center;

            border:6px solid #BDBDBD;

            outline:2px solid darkred;

            width:200px;

            position:absolute;

            left:50%;

            transform:translate(-50%, -50%);

        }

        .parent {

            position:relative;

            border-top:30px solid #BDBDBD;

            border-bottom:30px solid #BDBDBD;

            padding:1px;

            background-color:darkred;

        }

    </style>

    </head>

    <body>

    <div class="parent">

        <div class="title">OUR VALUES:</div>

    </div>

    </body>

    </html>

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    October 12, 2017

    Yup.  I was thinking along the same lines (pun intended) .

    You could also use a background-image or SVG.

    Nancy

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices