Skip to Content

A stick figure smiling

Here's a preview from my zine, Hell Yes! CSS!! If you want to see more comics like this, sign up for my saturday comics newsletter or browse more comics!

Image of a comic. To read the full HTML alt text, click "read the transcript".

browse more comics! get the zine!
read the transcript!

border has 3 components

border: 2px solid black;

is the same as

border-width: 2px; 
border-style: solid; 
border-color: black;

border-style options

  • solid
  • dotted
  • dashed
  • double

(each word is surrounded by the border it describes)

  • lots more (inset, groove, etc)


you can set each side’s border separately:

     2px solid black;


border-radius lets you have rounded corners

border-radius: 10px;

border-radius: 50%; will make a square into a circle!


lets you add a shadow to any element

box-shadow: 5px 5px 8px black;
the first “5px” is the x offset, the second “5px” is the x offset, “8px” is the blur radius, and “black” is the color.


outline is like border, but it doesn’t change an element’s size when you add it

outlines on :hover/: active help with accessibility: with keyboard navigation, you need an outline to see what’s focused

Saturday Morning Comics!

Want another comic like this in your email every Saturday? Sign up here!

I'll send you one of my favourite comics from my archives every Saturday.
© Julia Evans 2024 | All rights reserved (see the FAQ for notes about licensing)