0

Hello, dear users of Pink Pan. I hope you have a good day. Today we want to start the second session of the CSS Tutorial. This tutorial is written in simple language and step by step so you have no problem learning it. Before reading this article, be sure to read the previous sessions first. You should also have a little familiarity with Html.

css border property

Using this property you can edit and customize the appearance of object borders. Borders are responsible for creating frames for Html objects.

Border properties

Using these properties you can edit the border, color, size, shape, etc.

  • border-color: Using this property, you can select the border color.
  • border-width: Using this property, you can select the thickness of the border.
  • border-style: Using this property, you can select the type of margin.
  • border-image: This css property removes the border color and uses the image instead.
  • border: It does all the work at the same time.

Well, let’s talk about how to use these. We will explain to you in order.

border-color

We use this property to specify the border color in css. You can use this link to select a color and generate that color code. To select a color, you can write its name, for example, blue, or you can use hex codes, or you can also introduce green, blue, and red with three parameters.

p.first {
   border-style: solid;
   border-color: blue;
}
h1.first {
   border-style: solid;
   border-color: #F1662A;
}

You can also paint each side a separate color. For example, red bottom, blue top, green left, yellow right. You can use the following code to use this feature.

h1.first {
  border-style: solid;
  border-color: blue yellow red green;
}

You can practice these codes in the online compiler of our website for free and see its output. All you have to do is register on our website and enter the compiler in your user panel.

The css border-radius Property

This property is used when you want to round the edge of an element. This property is used when you want to round the edge of an element. You can also control the amount of roundness and make it as much as you like. Of course, it has a maximum, and usually, you can not round more than 12px elements. You can learn how to use this css property from the following code.

<html>
<head>
<style>

h3.r1 {
  border: 2px solid red;
  border-radius: 4px;
}

p.r2 {
  border: 2px solid red;
  border-radius: 12px;
}
</style>
</head>
<body>
<h3 class="r1">The border-radius Property</h3>
<p class="r2">pinkpen.net</p>

</body>
</html>

CSS border-width Property

This Property is used when you want to edit the border width of Html elements. You can choose its size in pixels, centimeters, etc., or use words to describe it as a thin, medium, and thick. Also, as before, you can customize each side of the border. The first value is for the top side, the second for the right, the third for the bottom, and the last for the left side.

<style>
p.first {
  border-style: solid;
  border-width: medium; 
}

p.two {
  border-style: solid;
  border-width: 20px 30px 14px 25px; 
</style>

CSS border-image Property

You use this Property when you want to use the photo of your choice instead of the usual borders. The first and most important step is to choose a good photo. Your image should look good when used as a border. So be very careful in choosing it. In the next step, you have to choose whether you want the image to be stretched or repeated. We use the “round” to repeat in length and width and we use “stretch” to stretch. And in the last step, you have to tell where the image should be slice. The full code below shows you how to do this. Of course, this code uses padding that you have not yet learned. We will teach it to you in the following, do not worry.

<html>
<head>
<style> 
#image { 
  border: 15px solid transparent;
  padding: 15px;
  border-image: url(https://pinkpen.net/wp-content/uploads/2021/08/pinkpen-border.png) 30 round;
}
</style>
</head>
<body>
<p id="image">pinkpen.net <br> Home of programmers and webmasters of the world</p>

</body>
</html>

CSS border-style Property

The main and most important Property for Border is style. That’s why we brought it to you in the end. Using this property you choose what type of margin to use. There are several types of margins, and here are some of the most common ones. (In the future, we plan to create a section that explains all values for all languages and becomes like a complete database)

moji

moji

I am a computer engineering student, I have been working in SEO and WordPress for almost 8 years and I also have programming skills.

Leave a Reply

asdas

Copyright © 2019 pinkpen.net