is this type of border possible with CSS?

Report · Oct 12, 2017

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.

Report · Oct 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>

<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="title">OUR VALUES:</div>

</div>

</body>

</html>

Report · Oct 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 & Moderator

Report · Oct 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

Report · Oct 13, 2017

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

Report · Oct 13, 2017

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

<!doctype html>

<html>

<head>

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

</body>

</html>