skip to Main Content

BORDER & BOX

Udvalgte CSS-koder

BORDER-WIDTH

 border: 1px solid grey;
 border: 0.5em solid grey;
 border-top: 8px solid grey;
 border-right: 0.5em solid grey;
 border-bottom: 0.5em solid grey;
 border-left: 8px solid grey;
border-top: 1px solid grey; 
border-right: none solid grey; 
border-bottom: 3px solid grey; 
border-left: 1em;
border-width: 1px 0px 3px 1em; 
border-style: solid; 
border-color: grey;

BORDER-STYLE

 border-style: none;
 border-style: solid;
 border-style: dotted;
 border-style: dashed;
 border-style: double;
 border-style: groove;
 border-style: ridge;
 border-style: inset;
 border-style: outset;
border-top: 1px solid grey; 
border-right: none; 
border-bottom: 3px dashed grey; 
border-left: 1em double;
border-width: 1px 0px 3px 1em; 
border-style: solid none dashed double; 
border-color: grey;

BORDER-COLOR

 border-color: grey;
 border-color: #4c9ebd;
 border-color: rgb(255,140,0);
 border-color: rgba(255,140,0,0.2);
border-top: 1px solid grey; 
border-right: 2px solid #4c9ebd; 
border-bottom: 3px dashed rgb(255,140,0); 
border-left: 1em double rgba(255,140,0,0.2);
border-width: 1px 0px 3px 1em; 
border-style: solid none dashed double; 
border-color: grey #4c9ebd rgb(255,140,0) rgba(255,140,0,0.2);

BORDER-radius

border-radius: 0px
 border-radius: 0.5em;
 border-radius: 50%;
border-top: 1px solid grey; 
border-right: 2px solid grey; 
border-bottom: 3px dashed grey; 
border-left: 1em double grey;
border-top-left-radius:2em; 
border-top-right-radius:10px; 
border-bottom-right-radius:50%; 
border-bottom-left-radius:0px;
border-width: 1px 2px 3px 1em; 
border-style: solid none dashed double; 
border-color: grey #4c9ebd rgb(255,140,0) rgba(255,140,0,0.2);
border-radius: 2em 10px 50% 0px;

Box-shadow

box-shadow: none;
 box-shadow: 10px 0px 0px grey;
 box-shadow: -10px 0px 0px grey;
 box-shadow: 0px 10px 0px grey;
 box-shadow: 0px -10px 0px grey;

Blur

 box-shadow: 5px 0px 5px grey;
 box-shadow: -5px 0px 5px grey;
 box-shadow: 0px 10px 5px grey;
 box-shadow: 0px -10px 10px grey;

SPREAD

box-shadow: -5px -5px 0px 5px #888;

Color

box-shadow: 8px 8px 0px grey;
box-shadow: 8px 8px 0px #4c9ebd;
box-shadow: 8px 8px 0 rgb(255,140,0);
box-shadow: 8px 8px 0 rgba(255,140,0,0.3);

INSET

-moz-box-shadow: 2px 2px 2px grey inset; 
-webkit-box-shadow: 2px 2px 2px grey inset; 
box-shadow: 2px 2px 2px grey inset;
-moz-box-shadow: inset -5px -5px 5px #888;
-webkit-box-shadow: inset -5px -5px 5px #888;
box-shadow: inset -5px -5px 5px #888;
-moz-box-shadow: inset -5px -5px 5px 5px orange;
-webkit-box-shadow: inset -5px -5px 5px 5px orange;
box-shadow: inset -5px -5px 5px 5px orange;
-moz-box-shadow: inset -10px -5px rgba(0,0,0,0.3);
-webkit-box-shadow: inset -10px -5px rgba(0,0,0,0.3);
box-shadow: inset -10px -5px rgba(0,0,0,0.3)

Eksempler

1

.flereskygger1 {
    width: 100px; 
    height: 100px;
    text-align: center;
    padding-top: 40px; 
    border-radius: 50%; 
    box-shadow: 0px 0px 10px 5px black, 
    40px -30px lime, 
    -40px -30px 50px red, 
    -40px 30px yellow, 
    40px 30px 50px blue;
}

2

.flereskygger2{
    width: 100px; 
    height: 100px; 
    padding-top: 5px; 
    margin: 20px auto 0 auto; 
    text-align: center; 
    border: 10px solid rgb(255,140,0); 
    box-shadow: inset 0px 0px 35px rgba(255,140,0,0.5), 
    0px 0px 0px 20px rgba(255,140,0,0.5), 
    0px 0px 0px 40px rgba(255,140,0,0.5), 
    0px 0px 0px 80px rgba(255,140,0,0.5), 
    0px 0px 0px 105px rgba(255,140,0,0.2);
}

Shorthand properties

width, color, og style kan koges ned til en CSS-linje, eksempel:

border-width: 1px;
border-style: solid;
border-color: #000;

Shorthand:

border: 1px solid #000;
Back To Top
Search