Html css border top bottom

How to add left, right, bottom & top border in HTML CSS

You can add borders to a parts of a webpage in two ways:

1. Using CSS border property.
2. Using CSS border-style, border-width, and border-color properties.

The border is a line that occurs between the padding and margin in HTML and CSS.

Using CSS border property.

The easiest way to create a border is by using the CSS border property. The structure of the border property is:

border: border-style border-width border-color;

.red-box < border: solid 2px red; > 
I have a red border around me
 
 

I have a red border around me

Using CSS border-style, border-width, and border-color properties.

An alternative method of adding borders to elements on a webpage is by using CSS border-style , border-width , and border-color properties.

.blue-box < border-style: dashed; border-width:5em; border-color:#0000ff; > 
I have a red border around me
 
 

I have a blue border around me

For this second method, you have to set the border-style property otherwise, borders will not appear on your webpage.

Add Bottom Border in HTML and CSS

The bottom border is usually used for underlining links or showing the active page on a navigation bar. There are two ways of setting the bottom border in CSS:

1. Using border-bottom

You can use the border-bottom to add the bottom border on text(heading, lists, paragraphs) or containers(div, section, nav, footer).

2. Using Border Width, Style and Color

You can also set the bottom border using the border-width , border-style and border-color properties.

Create Left Border in HTML and CSS

You can create the left border in CSS:

1. Add left border using border-bottom

You can use the border-left to create the left border on text(heading, lists, paragraphs) or containers(div, section, nav, footer).

2. Add left border using Border Width, Style and Color

You can also set the left border using the border-width , border-style and border-color properties.

Create Right Border

You can create the right border in CSS:

1. Create right border using border-bottom

You can use the border-right CSS property to create the right border on text on different parts of a HTML web page.

2. Add right border using Border Width, Style and Color

You can also set the right border using the border-color , border-style and border-width CSS properties.

Add Top Border HTML & CSS

There are two ways of setting the top border in CSS:

1. Using border-top

You can use the border-top to add the top border on text(heading, lists, paragraphs) or containers(div, section, nav, footer).

2. Using Border Width, Style and Color

You can also set the top border using the border-width , border-style and border-color properties.

Hi there! I am Avic Ndugu.

I have published 100+ blog posts on HTML, CSS, Javascript, React and other related topics. When I am not writing, I enjoy reading, hiking and listening to podcasts.

Front End Developer Newsletter

Receive a monthly Frontend Web Development newsletter.
Never any spam, easily unsubscribe any time.

About

If you are just starting out you can test the waters by attempting the project-based HTML tutorial for beginners that I made just for you.

Okay, you got me there, I made it because it was fun and I enjoy helping you on your learning journey as well.

You can also use the HTML and CSS projects list as a source of projects to build as you learn HTML, CSS and JavaScript.

Start understanding the whole web development field now

Stop all the confusion and start understanding how all the pieces of web development fit together.

Never any spam, easily unsubscribe any time.

Recent Posts

Copyright © 2018 — 2023 DevPractical. All rights reserved.

Источник

border

Свойство border отвечает за отрисовку видимой границы блока. Часто видимую границу блока называют рамкой.

Само свойство border является шорткатом (короткой записью) и объединяет в себе значение для нескольких полных свойств:

Пример

Скопировать ссылку «Пример» Скопировано

Украсим текстовую карточку цветной сплошной рамкой.

   
Повседневная практика показывает, .
   div class="element"> p>Повседневная практика показывает, . p> div>    Скопировать Скопировано Не удалось скопировать   

Зададим рамку толщиной 5 пикселей, сплошную, цвета #ED6742:

 .element  border: 5px solid #ed6742;> .element  border: 5px solid #ed6742; >    Скопировать Скопировано Не удалось скопировать   

🛠 Ещё немного про треугольники. А точнее, стрелки. Их тоже можно создать при помощи border , но тут понадобится подключить свойство transform , чтобы повернуть элемент с рамками на 45 градусов в нужную сторону:

 div class="arrows"> div class="arrow _prev">div> div class="arrow _next">div> div>    Скопировать Скопировано Не удалось скопировать   

 .arrows  max-width: 1200px; height: 250px; margin: 0 auto; background-color: #f1f1f1;> .arrow  /* Рисуем квадрат */ width: 50px; height: 50px; /* Задаём левую рамку */ border-left: 5px solid #ff0001; /* Задаём нижнюю рамку */ border-bottom: 5px solid #ff0001;> .arrow._prev  /* Поворачиваем квадрат нижним левым углом влево */ transform: rotate(45deg);> .arrow._next  /* Поворачиваем квадрат нижним левым углом вправо */ transform: rotate( -135deg );> .arrows  max-width: 1200px; height: 250px; margin: 0 auto; background-color: #f1f1f1; > .arrow  /* Рисуем квадрат */ width: 50px; height: 50px; /* Задаём левую рамку */ border-left: 5px solid #ff0001; /* Задаём нижнюю рамку */ border-bottom: 5px solid #ff0001; > .arrow._prev  /* Поворачиваем квадрат нижним левым углом влево */ transform: rotate(45deg); > .arrow._next  /* Поворачиваем квадрат нижним левым углом вправо */ transform: rotate( -135deg ); >    Скопировать Скопировано Не удалось скопировать   

Чем не стрелки для слайдера? 🤗

🛠 Часто встречающийся дизайнерский приём — появление рамки вокруг элемента при наведении на него курсора мыши.

Если просто добавлять рамку по селектору :hover , то элемент будет дёргаться. Причина в том, что размер элемента увеличивается на ширину рамки. Чтобы подобных подёргиваний не происходило, изначально задайте рамку нужной толщины, но установите ей прозрачный цвет ( transparent ). А по наведению курсора просто меняйте цвет на нужный. Profit! Вы прекрасны 😄

Источник