Highlighted

is this type of border possible with CSS?

New Here ,
Oct 12, 2017

Copy link to clipboard

Copied

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.

Views

589

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

is this type of border possible with CSS?

New Here ,
Oct 12, 2017

Copy link to clipboard

Copied

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.

Views

590

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 12, 2017 0
Adobe Community Professional ,
Oct 12, 2017

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 12, 2017 0
Adobe Community Professional ,
Oct 12, 2017

Copy link to clipboard

Copied

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

You could also use a background-image or SVG.

Nancy

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 12, 2017 1
LEGEND ,
Oct 13, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 13, 2017 1
Adobe Community Professional ,
Oct 13, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 13, 2017 0
Adobe Community Professional ,
Oct 13, 2017

Copy link to clipboard

Copied

and to complete what said Paula and Jon, a simple block can use up to 4 borders... using pseudo...

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Document sans nom</title>

    <style>

        div {

            position: relative;

            width:100px;

            height: 100px;

            border:10px solid orange;

            outline: 10px solid darkgrey;

        }

       

        div:before {

          content: '';

          position: absolute;

          top: -15px;

          left: -15px;

          right: -15px;

          bottom: -15px;

          background: olive;

          z-index: -2;

        }

        div:after {

          content: '';

          position: absolute;

          top: 15px;

          left: 15px;

          right: 15px;

          bottom: 15px;

          background: red;

          z-index: 5;

        }

       

    </style>

</head>

<body>

    <div></div>

</body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 13, 2017 1