CSS Border

The CSS border properties allow you to specify the style, width, and color of an element's border.

We can define border by using these border properties:

border-width:2px;
border-style: dashed;
border-color: red;
             

Shorthand border property:

border: 2px solid red;
             

To remove the border:

border: none;
             

Set border to specific side of html element:

border-top:4px solid blue;
border-bottom: 4px solid red;
            

The border-radius property is used to add rounded borders to an element:

border-radius: 10px;
            

We can define border-radius for a specific side of html element:

border-top-left-radius:10px;
border-top-right-radius:10px;
            

CSS Display Property

The display property specifies the display behavior (the type of rendering box) of an element. Every element has its default display behaviour depending on what type of element it is. Like, <p> is the block level element and <a> is the inline level element, we can change the display behaviour of both element vice versa using css display property.

Syntex:

display: value;
            

There are many display property values are available, few of them are:

display: none-> The element is completely removed from html DOM object or web page.

Ex->

display: none;
            

display: block-> Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width of the web page or browser window.

Ex->

display: block;
            

display: inline-> Displays an element as an inline element (like <a>).It only occupy as much space which is required for it and by default any height and width properties will have no effect.

Ex->

display: inline;
                

display: inline-block -> Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values similar to a block level element.

Ex->

display: inline-block;
                

display: flex -> Displays an element as a block-level flex container.

Ex->

display: flex;
                

display: grid -> Displays an element as a block-level grid container.

Ex->

display: grid;