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
SeHyun Choi
3,441 PointsWhy 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
23,177 PointsHi 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
Rachel Lev
14,583 PointsDid you do:
border-style: dotted;?
try:
border-style: dashed;
Frank Dillon
7,170 Pointsits most likely just an update that happened the made the dotted style dots and not squares
SeHyun Choi
3,441 PointsRachel 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
14,583 Pointstry this:
border: solid 10px red;
width: 50px;
height: 50px;
SeHyun Choi
3,441 PointsWhen I do border:solid 10px red; my border is one straight line.
Rachel Lev
14,583 PointsOops...my mistake
SeHyun Choi
3,441 PointsSeHyun Choi
3,441 PointsThank you Max, and thank you Rachel for all your help.
Samuel Duarte
2,931 PointsSamuel Duarte
2,931 PointsBut why is Guil's border's square instead of circles,