Let’s clear up a couple things: borders
DO add to the size of an element (as you increase
the border width, things get bigger).
But the exception here is when you’ve set
specific dimensions on an element.
If you have a width or a height, those values
lock those dimensions, meaning borders WON’T
always add to the size.
Now why does this matter?
It doesn’t.
Except it does because borders are used all
the time.
Because we’re going to cover all sorts of
border controls — we’ll do border fundamentals
(radius, styles, width, color), we’ll cover
shapes like capsules, ellipses, circles (and
how to use Object fit to create consistent
circular images out of different aspect ratios)...
we’ll do sides and edges, bevels, and we’ll
end with animated transitions.
Let’s start with Borders.
Now we’ll cover borders.
We can add radius to control rounding — this
applies to all four sides.
By default, it’s pixels, but we can also
use percentages and other units (we’ll cover
that later in shapes) — but the big thing
here is that we can also set rounding on specific
corners.
If we want to clear it out?
We can just reset.
By default, the border style isn’t defined
(none is obviously no border, but we can choose
other styles, too.)
And these become more obvious when we set
a width.
1 pixel is the default.
And we can see the results in real time right
on the canvas.
What about color?
Set a color?
Now the border has a color.
That’s border basics.
Let’s get into shapes.
A few tricks here: for a capsule (a pill shape)?
All we have to do is set our radius to a larger
pixel value (since it’s radius, it has to
be larger than half the element’s shortest
dimension).
If you don’t want to do the math, a larger
number like 500 usually works okay.
For ellipses (more of an oval shape), we can
use 50%.
In fact, percentages are going to base themselves
on the width and height of an element, but
keep in mind: when you have a bunch of elements
with different dimensions, ellipses can appear
inconsistent.
And what about circles?
Well, this requires a ruler and a trip to
the Large Hadron Collider at CERN.
But as an alternative, you can do the SAME
thing we did for an ellipse, but just ensure
that the element you’re styling has a width
equal to its height (they need to be the same).
So.
Then how do you make an image circular?
Well, we can select this image (which is square),
and set its radius to 50%.
BUT.
What about this one?
(What about this image?)
This is where we can use radius AND object
fit to perform a magic act known as “image
inside div block”.
And by default, a blank div block doesn’t
really have dimensions.
When we put the image INSIDE, it becomes as
large as the image.
But here’s where the fun starts: we can
select the div block (let’s create a class
called “Image holder thing”) and let’s
set ITS dimensions.
(Set a width...set a height EQUAL to the width.)
And once we do that?
We set TWO more things on the Image holder
thing: radius to 50% (that’ll make it circular
since the width and height are equal), and
overflow hidden (this is going to hide any
part of the image that’s OVERFLOWING outside
of our new circle.
As for the image itself?
With the image selected, we’re going to
do two more things: (1) we’re going to set
its width and its height (both dimensions
here) to 100%.
And (2), we can use Object fit (we can fit
the image to Cover the space available inside
our circular div block)...and if we want,
we can position it (we can anchor it to a
corner, or in this case, we can just anchor
to the center).
But those are some basic shapes we can create
with radius: capsules using a pixel value
as the radius, ellipses using percentages,
and circles (ellipses that have equal values
for width and height).
And we can do MORE.
Let’s create some weirder shapes with sides
and edges.
For sides, this means breaking our border
properties up into INDIVIDUAL sides.
Obviously, this means we can set each of them
one-by-one.
So on our top one here, we can set a border
for THAT.
We can always go back to adjusting all sides
at once by just clicking in the middle (maybe
we want them even for now), but we can also
go BACK to styling individual sides to make
a more specific change (we’ll just add some
weight to the left border here).
But what about radius?
Same deal here.
We can break it out into four corners (set
the top-left to 20%, the top-right to 50%,
bottom-right is 50 PIXELS — we can mix values
here — and the bottom-left is 50%).
Now we can play with this, we can tweak values
and create ALL sorts of weird things by manipulating
individual sides and edges.
But what happens (by the way, this is bevels)
— what happens when we have four sides and
we start changing colors on only SOME of them?
Well, we spoiled that.
Because this section is called “bevels.”
We’re just adding a border here — let’s
do sort of this grayish color (we can always
change this later), and let’s set the border
width to something like 10 pixels.
Once we do?
We can go right in and start modifying only
ONE of the sides.
On the left?
Let’s pick a DIFFERENT color.And now we
have a bevel.
So what’s happening here (with all borders),
is that when sides INTERSECT, they create
diagonal lines based on the border width of
each side.
You can CHANGE that angle by changing the
border width of either of the sides.
That’s beveling.
What about animations?
(Animated transitions).
Well, as we know, we can style anything in
the Style panel (we can switch over from None
to Hover) — this is what shows up when someone
hovers.
So on hover?
We can add some rounding (we can set a radius
on our class here)...so now, when we hover,
it goes from rectangular to...well, it’s
still rectangular.
But the CORNERS are rounded.
And on these types of things, we can go BACK
to none (we can leave Hover) and add a transition.
And when we go to do that (let’s go down
and ADD our transition) — we have to select
the PROPERTY that’s changing.
The property is Border radius (because we
just shifted the border radius in Hover).
So what does that do?
It TRANSITIONS between our None and Hover
state.
And when we move our cursor OUTSIDE the button?
It animates back.
But it’s not just Hover.
In fact, we can go back over (let’s go into
our Hover state) and REMOVE the property (let’s
go in and reset the property altogether).
Instead, let’s go over to Pressed (our Pressed
state).
If we do THIS, we can add something to our
radius (let’s do maybe a smaller value here).
And now when someone visits this page, hovering
over the button...does NOTHING.
Because we removed that.
BUT, when we click?
We get this incredible visual feedback by
animating the radius.
We can also animate things like the border
COLOR - we can have one or multiple border
colors change (we’d do this by adding a
transition for Border color)...we can animate
the border width itself, which, at times,
can look comical.
And of course, we can delete our project entirely
from the Dashboard.
But that’s it.
We covered border basics like radius, styles,
width, color...we did shapes, sides and edges,
bevels, and animated transitions.
What we DIDN’T cover was how Grimur was
going to end this video, and knowing his sense
of humor, there’s a fairly high probability
that this sentence doesn’t finis–
