A propriedade CSS border permite definir como bordas arredondadas são. A curva de cada esquina é definida usando um ou dois raios, definindo sua forma: círculo ou elipse.

Esta propriedade é um shorthand para definir as quatro propriedades border-top-left-radius,  border-top-right-radius,  border-bottom-right-radius e border-bottom-left-radius.

  1. border-width: Define a largura da borda. Você pode especificar um valor único para todas as bordas ou valores separados para cada uma das quatro bordas (superior, direita, inferior e esquerda). Exemplos:

    
    border-width: 2px;                 
     /* Todas as bordas com 2 pixels de largura */
    border-width: 1px 3px 2px 4px;     
     /* Borda superior: 1px, direita: 3px, inferior: 2px, esquerda: 4px */
    
    
  2. border-style: Define o estilo da borda, como sólido, pontilhado, tracejado, etc. Exemplos:

    
    border-style: solid;       /* Borda sólida */
    border-style: dotted;      /* Borda pontilhada */
    
    
  3. border-color: Define a cor da borda. Você pode especificar uma cor única para todas as bordas ou cores separadas para cada uma das quatro bordas. Exemplos:

    
    border-color: #ff0000;             /* Borda vermelha em todas as bordas */
    border-color: red green blue;      /* Borda superior: vermelha, direita: verde, inferior: azul, esquerda: a cor padrão (preta) */
    
    
  4. border: Esta é uma propriedade abreviada que combina border-width, border-style e border-color em uma única declaração. Exemplo:

    
    border: 2px dashed #00f; /* 2 pixels de largura, estilo tracejado e cor azul */
    
    
  5. border-radius: Define o raio dos cantos da borda, criando cantos arredondados. Você pode especificar um valor único para todos os cantos ou valores separados para cada canto. Exemplos:

    
    border-radius: 10px;             
     /* Todos os cantos com raio de 10 pixels */
    border-radius: 5px 10px 15px 20px; 
    /* Cantos superior esquerdo: 5px, superior direito: 10px, inferior direito: 15px, inferior esquerdo: 20px */
    
    
  6. border-image: Permite definir uma imagem como uma borda em vez de um estilo de linha simples.

  7. border-collapse (para tabelas): Controla como as bordas de células de tabela são renderizadas e se elas se fundem ou não.

padding: