We have already seen during the introduction of the bay's properties of these CSX, the board of property.
In talking about the advanced use of these property, let's introduce, first of all, web keep modes
O and S, which are the functions that we would see during this lesson, useful to implement some excess
properties and therefore to make them visible also in out of date browsers, which without these could
not appear correctly.
In particular, web, Kate is used by Chrome and Safari, therefore by the browsers of Google and Apple
modes, by the Firefox browser AMS, for the browsers of the Microsoft and oh, for the browser.
I'm saying this because the first function we're going to see talking about borders is the image that
can be inserted within the borders less than from a simple border that we are going to attribute to
each one.
Therefore, let's insert H1 and insert border five pizzle as let's select solid black.
Let's refresh and as you see, the border around title got inserted.
Let's retrieve the white background to make all the functionalities visible at the fullest.
Let's close, save and refresh.
As I was saying, the first function we're going to see about the borders is border image.
With border image, we can insert inside the border a specific image.
That starts attributing a margin to age one so that the border may appear more detached and the image
more visible in its inside.
Therefore, let's insert a ten piece of padding, let's say refresh and see that the border got positioned
and it is 10 pixels wider than before.
Now, to be able to insert the image, we can first of all select a transparent coloring for the border
because no color should be visible inside it, but only the image.
Therefore, after penning let's insert the order image, which request is Syntex made up of, you are
L..
And the image to insert.
And then in addition to a numeric data corresponding to the board, we want to add as far as the image.
And last, in addition to the type that can be round or stray, once explained this first thing, let's
modify the border from five to 20 pixels so that it adapts to the image we are going to insert at this
point.
You can retrieve the file attached to this video, which is the image we are going to use to insert
within our border.
And once downloaded the estancia underscore AECO image.
You see, you end up with this series of E's belonging to the Estancia logo, which will appear in a
different color and made up of the structure permitting to cover perfectly every part of our border.
In fact, as you can see, the ease placed on the Four Corners have to be considered as the corners
of the border.
Therefore, they will appear at the Four Corners within our age HTML page.
Whereas the most inner eyes, red, blue, orange and gray, will represent Will composed the leaner
part of our borders, when you have to insert an image into a border to make sure that the structure
is exactly like the one you are watching right now, because not all the images obviously are fake to
be inserted in the border.
In this case, the image is 60 pixel wide and 60 pixel high.
It's a perfect square.
Now we can close it and let's insert your.
The stars, you underscore eco PMG without the advocacies, because in this case, there's no need and
at this point, let's define the numeric value that coincides with the border.
And so plenty and as a basis, let's live round.
That is the option of permitting us to insert the image exactly as it was when we reported it.
In fact, the to any figure just inserted, we make the images both internally and at the corners,
repeat every 20 pizzas.
Therefore the corners being of 20 exactly like the width of the border will appear just once.
Instead, internally, the image will be repeated along the whole border.
Let's save and refresh.
As you see, the image inserted inside the border appears exactly as just described.
With a single E on the corners and along the line, some repeated ese.
If we inserted instead around.
The STREAT function.
With saving and refreshing, as you can see, the image would not repeat part of its content.
Therefore, would not repeat every single square among those we have seen before.
Instead, it would stretch them according to the real dimensions of the page and therefore both according
to the insert the text and height and weight.
This brief presentation of Border Image leads us to understand that whenever we want to insert a border
done this way.
We better use the round function whenever instead, for example, we had framed it by stretching does
not spoil the visualization, we might use the STREAT function.
Therefore, let's set our round save and let's add the various border images.
With the preface says, We mentioned at the beginning of this lesson they for starting from webcast
to.
I just see we insert Dash Webjet dash board image.
Karlan and let's hope what inserted before, let's do the same for Mode's.
Four oh.
And let's stop here, because as therefore with the tag of this type dash as and therefore everything
released by Microsoft does not want a different functionality for Border Nesh image, and it's compatible
with Internet Explorer even in all versions.
Now we can say refresh, we can see that there was no modification because obviously we have an updated
version of Chrome.
We are using this preview.
And let's move on to the following lesson where we are detailing additional aspects around the borders.