Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Border on three sides

Tags:

css

border

If i want to have border on the three sides, do I need to declare border for each side eg.

border-left:1px solid green;
border-bottom:1px solid green;
border-right:1px solid green;

or is there any shortcut way?

like image 859
Billa Avatar asked Dec 05 '11 08:12

Billa


People also ask

How do you make a 3D border in CSS?

We can assign a 3D groove border to an element using the following syntax. Syntax: border-style: groove; Approach: In this example, we will give the grooved border to the heading h1.

Can you add 2 borders in CSS?

Introduction to CSS Multiple Borders. Multiple borders in CSS can be done by box-shadow property. Generally, we can get a single border with border property. Box-shadow property is not for multiple borders, but still, we are creating multiple borders with box-shadow property.

How do you put a border on one side in CSS?

If you want to set a border to the left and right, use three values (write none to the first and third values). Example: border-style: none solid none none; // border will be applied only to the right side. border-style: solid none; // border will be applied only to the top and bottom sides.


3 Answers

border: 1px solid green;
border-top: 0;
like image 74
benni_mac_b Avatar answered Nov 13 '22 07:11

benni_mac_b


Well, there is a slightly shorter way - but it's not what you'd call a shortcut...

border: 1px solid green;
border-top: 0;

Or you could declare partial elements which would allow for clarity:

border-color: green;
border-style: solid;
border-width: 0 1px 1px 1px;
like image 32
Amadiere Avatar answered Nov 13 '22 07:11

Amadiere


You don't need to declare the border-top style and then override it:

border: 1px green;
border-style: none solid solid;
like image 5
Mori Avatar answered Nov 13 '22 07:11

Mori