Borders in CSS

Border се използва за задаване на граница в CSS

border-style - задава стил на границата и има следните стойности:

solid border

dashed border

dotted border

double border

ridge border

groove border

outset border

inset border

mixed border (border-top-style, border-bottom-style, border-left-style, border-right-style)

Border changer

border-style:

border-width:

border-radius:

Red: 128

Green: 128

Blue: 128


                    .object{

                        border-style: solid

                        border-width: 0

                        border-radius: 0

                        border-color: #808080

                    }

border-width - задава размер на границата

border-color - задава цвят

border-radius - прави закръглени ъгли

Border Image

Като използваме това изображение:

Може да направим граница базирана на изображението:

border-image:url(border.png) 30 rounded | (image url) (на кой пиксел разделяме картината)(да се повтаря или разтяга)

Напреднал пример

css
is
awesome


                    .gradient-border {

                        --border-width: 3px;

                        position: relative;

                        display: flex;

                        justify-content: center;

                        align-items: center;

                        width: 300px;

                        height: 200px;

                        font-family: Lato, sans-serif;

                        font-size: 2.5rem;

                        text-transform: uppercase;

                        color: white;

                        background: #222;

                        border-radius: var(--border-width);

                    }


                    .gradient-border::after {

                        position: absolute;

                        content: "";

                        top: calc(-1 * var(--border-width));

                        left: calc(-1 * var(--border-width));

                        z-index: -1;

                        width: calc(100% + var(--border-width) * 2);

                        height: calc(100% + var(--border-width) * 2);

                        background: linear-gradient(60deg,
 #5f86f2,
 #a65ff2,
 #f25fd0,
 #f25f61,
 #f2cb5f,
 #abf25f,
 #5ff281,
 #5ff2f0);

                        background-size: 300% 300%;

                        background-position: 0 50%;

                        border-radius: calc(2 * var(--border-width));

                        animation: moveGradient 4s alternate infinite;

                    }


                    @keyframes moveGradient {

	 50% {

        background-position: 100% 50%;

	}

}