Page Widget How to - Create interlock, irregular borders

Question

We would like to know how to create interlock, irregular borders.

Answer


<html>
<head>
    <style type="text/css">
        div.box {<!--   w  ww  . j av  a2s  .c om-->
            background: #EEE;
            border-style: solid;
            border-width: 1px;
            position: relative;
            width: 100px;
            z-index: 1;
        }

        div.group {
            float: left;
        }

        #box-1, #box-4 {
            z-index: 2;
        }

        #box-1 {
            border-color: #f00;
            border-bottom: 0;
            border-right: 0;
            padding-right: 2px;
        }

        #box-2 {
            border-color: red;
        }

        #box-3 {
            border-color: black;
        }

        #box-4 {
            border-color: green;
            border-left: 0;
            border-top: 0;
            padding-left: 2px;
        }

        #group-2 {
            left: -2px;
            position: relative;
        }
    </style>
</head>
<body>
<div class="group" id="group-1">
    <div class="box" id="box-1">one<br />one<br />one<br />one</div>
    <div class="box" id="box-2">two<br />two<br />two<br />two<br />two<br />
    two</div>
</div>
<div class="group" id="group-2">
    <div class="box" id="box-3">three<br />three<br />three<br />three<br />
    three<br />three</div>
    <div class="box" id="box-4">four<br />four<br />four <br />four </div>
</div>
</body>
</html>

The code above is rendered as follows: