CODEWITHSUNDEEP
htmlcsstextarea
BurebistaRuler
BurebistaRuler

Reputation: 6519

Style a textarea with half border

how can I do a textarea to have a half border and to look just like the one from image below? and all this only with css.

enter image description here

In my html looks like :

    <div class"textareaKeeper">
    <textarea class="forDesc">Small Description</textarea>
</div>

Upvotes: 2

Views: 6461

Answers (4)

Antony
Antony

Reputation: 15106

Try to shift the textarea upwards and adjust for margins and paddings.

See DEMO (fixed for browser inconsistencies).

textarea {
    width: 198px;
    height: 20px;
    line-height: 20px;
    top: -12px;
    border: none;
    resize: none;
    margin-left: 2px;
    position: relative;
    padding: 0 2px;
}
div {
    border-left: 2px solid red;
    border-right: 2px solid red;
    border-bottom: 2px solid red;
    height: 10px;
    width: 204px;
    margin-top: 20px;
}

Upvotes: 4

ssilas777
ssilas777

Reputation: 9754

Try this

.forDesc{
    border-style:solid;
    border-color:white red red red;
}

If you want to achieve half border it's not possible with direct CSS border property

may be this can help you css border-left 50% height

Upvotes: 1

Sowmya
Sowmya

Reputation: 26969

Create a span or div inside the parent div and make it position:absolute and add the border

HTML 

<div class="textareaKeeper">
    <textarea class="forDesc">Small Description</textarea>
      <span></span>
</div>

CSS

textarea{
    border:none; 
    height:30px;
    background:#fcf7d1;
    bottom:0;
    vertical-align:bottom;
    width:100%
}
span{
    width:100%;
    position:absolute;
    bottom:0; display:inline-block;
     border-bottom:solid 1px red;
    border-left:solid 1px red;
    border-right:solid 1px red;
    height:15px
}
.textareaKeeper{
    border:none;   
    display:inline-block;
    position:relative
}

DEMO

Upvotes: 1

Matt Lambert
Matt Lambert

Reputation: 3665

textarea {
 border-top: 0;
 height: 18px; /* optional but looks like you have a short text area */
}

Upvotes: 1

Related Questions