CODEWITHSUNDEEP
htmlcss
Jaime Rivera
Jaime Rivera

Reputation: 1406

Add stroke effect to DIV border

I need to create a HTML div with custom border. According to what the designer told me, the border has a radius of 3px and stroke of 8px, color f7f7f7 and position outside

What I have so far is:

div#content {
    padding                 :   10px 20px;
    border-style                :   solid;
    border-width                :   8px;
    border-color                :   #F7F7F7;
    -webkit-border-radius       :   3px;
    -moz-border-radius          :   3px;
    border-radius               :   3px;

}

I really don't know what the stroke effect is and how to do it with css.

Upvotes: 1

Views: 24517

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 106048

i understand 'stroke' as outlined , like usually said for a text effect. I would go ,since outline isn't friendly with radius:

div {
    border:solid; /* no info for size nor color yet */
    box-shadow: 0 0 0 8px #f7f7f7;
    border-radius:3px; /* prefix not needed anymore */
}

Upvotes: 0

Dah Problum
Dah Problum

Reputation: 141

What you are looking for is border: dashed; If the designer said stroke, chances are they mean dashed. I've updated Yotam's fiddle

border-style : dashed;

jsfiddle

Upvotes: -3

Yotam Omer
Yotam Omer

Reputation: 15376

Stroke basically means outline or border - this is the professional name of it. your code seems fine. didn't it work?

It works in this jsFiddle. it creates a thick, light grey border with a little bit of rounded corners.

also, you can use shorthand: border: 8px solid #f7f7f7;

Upvotes: 6

Related Questions