CODEWITHSUNDEEP
css
Nick
Nick

Reputation: 69

I want to make one part of my border different from others

I want to make a div that a 2px solid white border on the bottom, left, right, and most of the top except for a small part roughly 50px wide that will have a 1px solid green border. I know php if you think that will help. My current css is this...

div#ghostBox{
    width: 170px;
    height: 100px;
    border: 2px solid white;
    position: fixed;
    left: 550px;
    top: 270px;
}

Btw I am making a game of pac-man.

Upvotes: 0

Views: 85

Answers (4)

sourcechange
sourcechange

Reputation: 95

i think you want this (: 

body{
            background-color:black;
            }
            p{
            color:white;
            margin: 1px;
            }
            
            /* TEXT BOX */              
            div#ghostBox{
                height: 100px;
                width: 150px;
                border: 2px solid white;
                border-top: 5px solid white;
                position: fixed;
                left: 50px;
                top: 50px;
                color:red;
                padding: 0px;
                padding-top: 0px;
            
            }
            
           /* High text color line */
            div#text{
                border-top: 5px solid green;
                  position: absolute;
              margin-top: 0px;
                width: auto;
                margin: 0px;
            }
            
            /* High color line after text */            
            div#notext{
                border-top: 5px solid red;
                margin-top: 0px;
                width: auto;
                margin: 0px;
            }
<div id="ghostBox"><div id="text"><p>good luck
</p></div><div id="notext"></div></div>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 273839

You can keep the use of only one element and rely on gradient:

body {
  background: pink;
}

.box {
  width: 170px;
  height: 100px;
  border: 5px solid white;
  border-top: none;
  background: linear-gradient(to right, white 50px, green 0) 0 0/100% 5px no-repeat;
}
<div class="box">

  </div

Upvotes: 1

ᔕᖺᘎᕊ
ᔕᖺᘎᕊ

Reputation: 3011

There may be better ways, but you could use a span at the beginning of the div:

Just set the border-top for the span and set its width:

(I removed the left and top properties for the example) 

body {
  background-color: red;
}

div#ghostBox {
  width: 170px;
  height: 100px;
  border: 2px solid white;
  position: fixed;
}

span {
  border-top: 2px solid blue;
  width: 50px;
  position: absolute;
}
<div id='ghostBox'>
  <span>&nbsp;</span> test
</div>

Upvotes: 0

brk
brk

Reputation: 50346

You can do it using css after or before pseudo selector. Below is just an example . You can modify it according to your requirement

div#ghostBox {
  width: 170px;
  height: 100px;
  border: 2px solid white;
  position: fixed;
  background: red;
}

div#ghostBox:after {
  content: '';
  width: 50px;
  border: 2px solid green;
  position: absolute;
  padding-right: 50px;
}
<div id="ghostBox"> Ghost Box</div>

Upvotes: 0

Related Questions