CODEWITHSUNDEEP
htmlcssborder
Only Bolivian Here
Only Bolivian Here

Reputation: 36743

HTML technique to create custom dotted borders on divs?

Here is a screenshot example:

enter image description here

Notice the border around the container. How can I achieve this effect for a website?

I've tried the following rule:

border: 1px dotted black;

And it results in:

enter image description here

Upvotes: 0

Views: 1389

Answers (4)

web_bod
web_bod

Reputation: 5758

the size of the dots is controlled by the border-width - try border: 4px dotted #ccc;

Upvotes: 2

jacktheripper
jacktheripper

Reputation: 14219

Set margin-top to 0.5em on the text, and the border to dashed

See this example

For the full layout try something like this

Upvotes: 0

ghoppe
ghoppe

Reputation: 21784

Try dashed.

border: 1px dashed #ccc;

Example.

Upvotes: 6

Travis J
Travis J

Reputation: 82287

That is not entirely cross browser compliant as it is new in CSS3. You can read more about it here: http://www.css3.info/preview/border-image/

A more custom way to do it would be with two overlapping divs where one is only slightly larger than the other by either size or by using padding.

Upvotes: 2

Related Questions