Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) The Box Model Borders

SeHyun Choi
SeHyun Choi
3,441 Points
Posted by SeHyun Choi
SeHyun Choi
3,441 Points

Why is my dotted border circular instead of square?

My dotted borders are circular dots. Why is that and how do i get square dots?

6 Answers

Max Senden
Max Senden
23,177 Points
Max Senden
Max Senden
23,177 Points

Hi SeHyun,

As the name implies 'border-style: dotted' results in a borderline that is made out of little circles or dots. Currently there's no quick way to created a borderline that's made up out of small squares. There are several workarounds such as creating a psuedo border by using SVG patterns but it's quite complex and adds tons of extra code to your project. Also cross-browser compatibility is an additional issue you have to deal with.

So unless your design is absolute dire need of having squared border lines save yourself a lot of hassle and just pick a different border styling ;-)

Having said this: it's possible for a dotted border-style to look like little squares when its width is 3px or smaller.

Hope it helps, Max

SeHyun Choi
SeHyun Choi
3,441 Points
SeHyun Choi
SeHyun Choi
3,441 Points

Thank you Max, and thank you Rachel for all your help.

Samuel Duarte
Samuel Duarte
2,931 Points
Samuel Duarte
Samuel Duarte
2,931 Points

But why is Guil's border's square instead of circles,

Rachel Lev
Rachel Lev
14,583 Points
Rachel Lev
Rachel Lev
14,583 Points 
Did you do:
 border-style: dotted;? 
try:
 border-style: dashed;
Frank Dillon
Frank Dillon
7,170 Points
Frank Dillon
Frank Dillon
7,170 Points

its most likely just an update that happened the made the dotted style dots and not squares

SeHyun Choi
SeHyun Choi
3,441 Points
SeHyun Choi
SeHyun Choi
3,441 Points

Rachel thank you for the reply. When I do border-style:dotted; I see circular dots

When I do border-style:dashed; I see rectangle dots

Rachel Lev
Rachel Lev
14,583 Points
Rachel Lev
Rachel Lev
14,583 Points

try this:

border: solid 10px red;
width: 50px;
height: 50px;
SeHyun Choi
SeHyun Choi
3,441 Points
SeHyun Choi
SeHyun Choi
3,441 Points

When I do border:solid 10px red; my border is one straight line.