Con CSS3, podemos crear bordes redondeados, añadir sombra a las cajas, y utilizar una imagen como un borde - sin necesidad de utilizar un programa de diseño, como Photoshop.

Propiedades de borde:

  • border-radius
  • box-shadow
  • border-image

EjemploEjemplo

Estilos
  1. h2 {
  2. border:thin solid #00C;
  3. width: 300px;
  4. margin-left: 10px;
  5. padding: 5px;
    background-color: #09C;
  6. background-image: url(xml.jpg);
    background-position: 2 center;
    background-repeat: no-repeat;
    border-radius:7px;
    -webkit-border-radius:7px;

    height: auto;
  7. font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  8. font-style: normal;
  9. font-weight: bold;
  10. color: #FFF;
  11. text-align: center;
  12. }

 

Html y Resultado
<body>
       <h2>CICLOS FORMATIVOS</h2>
</body>

CICLOS FORMATIVOS

Questión​¿Porque utiliazamos en el código CSS  -webkit-border-radius:7px; ?

Saber más Para saber más

Puedes ver todas las propiedades y atributos referente a los bordes de elementos haciendo clic aquí.