CSS Borders

 Eduaction Management 959 Lahore

Code With Jahangir

CSS Borders

FREE COURSES

FREE CERTIFICATE

CSS Borders

Border property helps in creating borders around the text. Various properties in it are discussed in this module.

 

Border Style

It specifies the type of border a text is going to have.

 

Eg-

 

Output:

 

Border Width

It sets the width of the border in pixels (or there are key values too like medium, thin, thick)

 

Eg:

border-style: solid;
border-width: thin;

 

Output:

 

You can assign values according to your wish or use medium/thick instead of thin if you wish to.

 

CSS Border Colour

This property assigns colours to the border of the text. We’ve already discussed in the CSS colours module different ways to provide the colour value like rgb, hsl, etc.

 

Eg:

border-style: solid;
border-color: aqua;

 

Output:

 

CSS Border Radius

Rounded borders around buttons look classic, which can be achieved by border-radius property. 

 

Eg:

border-style: solid;
border-radius: 20px;

 

Output:

In this example, we gave a single value to the property; but if you want to choose for each edge you can provide two values, three values and four values which resemble the top-left corner, top-right corner, bottom-left corner, and bottom-right corner. 

 

Apart from that, you can control the outer radii as well using “%” or em (relative font size unit in CSS, we’ll discuss it later in depth).

 

Eg:

border-style: solid;
border-radius: 20px 10em;

 

Output

 

Border Collapse & Spacing

CSS has these two properties too, to help the user select the spacing between two borders but before you go testing them, this property requires a table.

 

Which of course we’ll look at later. For now, you can know the syntax of both properties.

border-collapse: value;
border-spacing: value; 

 

Border Shorthand

Just like background shorthands, there exists a border shorthand which takes three properties: width, style and colour.

 

Eg:

border: solid red 5px;

 

Output:

 Eduaction Management 959 Lahore

Code With Jahangir

CSS Borders

FREE COURSES

FREE CERTIFICATE

Previous Post Next Post

Contact Form