DEV Community

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

Posted on

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

#css #border

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

Top comments (3)

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 •

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

Read next

ridoy_hasan profile image

Flexbox – The Modern Way to Align and Distribute Space

Ridoy Hasan -

alvaromontoro profile image

11 New Features and Functions Arriving in CSS

Alvaro Montoro -

labby profile image

Button Shrink Animation Tutorial

Labby -

aepasahan profile image

CSS Grid vs Flexbox: A Detailed Guide to Responsive Design

Ahmet Erkan Paşahan -