![A stick figure smiling](/images/welcome.jpg)
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".](/images/uploads/css-borders.png)
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)
border-{side}
you can set each side’s border separately:
aborder-bottom:
2px solid black;
border-radius
border-radius lets you have rounded corners
border-radius: 10px;
border-radius: 50%;
will make a square into a circle!
box-shadow
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
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!