Для создания scroll-бара в CSS используется свойство overflow. Свойство overflow управляет тем, что происходит, когда содержимое элемента переполняется относительно заданной высоты и ширины.

Для создания вертикального scroll-бара:

.container {
  height: 100px; /* задаем высоту контейнера */
  overflow-y: scroll; /* отображаем вертикальный scroll-бар, если содержимое контейнера больше заданной высоты */
}

В данном примере контейнеру задается высота 100 пикселей, а свойство overflow-y указывает браузеру, что в случае, если содержимое контейнера окажется больше заданной высоты, нужно отображать вертикальный scroll-бар.

Для создания горизонтального scroll-бара:

.container {
  width: 100px; /* задаем ширину контейнера */
  overflow-x: scroll; /* отображаем горизонтальный scroll-бар, если содержимое контейнера больше заданной ширины */
}

Аналогично, контейнеру с заданной шириной задается свойство overflow-x со значением scroll, которое позволяет отображать горизонтальный scroll-бар при переполнении содержимого контейнера.

Для создания обоих типов scroll-баров:

.container {
  height: 100px; /* задаем высоту контейнера */
  width: 100px; /* задаем ширину контейнера */
  overflow: auto; /* отображаем оба типа scroll-баров, если содержимое контейнера превышает заданные параметры */
}

В данном примере для контейнера задаются высота и ширина, а свойство overflow позволяет отображать оба типа scroll-баров при переполнении содержимого контейнера. В случае, если содержимое контейнера не превышает заданные параметры, scroll-бары не будут отображаться.