DEV Community

loading...
Cover image for Do you often use border property to figure out and focus elements in CSS

Do you often use border property to figure out and focus elements in CSS

yashdesai profile image Yash Desai ・1 min read

Are you bored to type border: 1px solid red; each time to figure out some elements or to debug them?

Now all you need to just add a class ? at the end of your element's class list, that's it.

Add this tag into your <head> tag

<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/YashDDesai/question-mark-css@2.0.0/question-mark.css"
/>
Enter fullscreen mode Exit fullscreen mode

now, just add a class ? at the end of your element's class list

for example:

<div class="h-36 w-36 bg-green-100 ?">
  <!-- to-do -->
</div>
Enter fullscreen mode Exit fullscreen mode

Alt Text

Need more colors!

Border Color class
Red (default) ?
Green ?g
Blue ?b
Purple ?p
Yellow ?y
White ?w

Discussion (3)

pic
Editor guide
Collapse
afif profile image
Temani Afif

adding border is not a good idea to debug. You need to use outline:1px solid red instead. border will change your layout since it will be considered a part of the element dimension and will affect a lot of stuff like margin collapsing. Outline won't affect your layout

Collapse
cblte profile image
cblte • Edited

Thats a nice litte trick with the '?'. BUt I would also use 'outline' as it is not added to the dimension of the object.

Note: Outline differs from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline. Source: w3schools.com/css/css_outline.asp

But is there an easy way of adding an outline to ALL components? Or all div, p, table or whatever?

Collapse
yashdesai profile image
Yash Desai Author

Thanks for your suggestion, I really missed that thing, I'm really grateful to you!