• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Box mit runden Ecken

Status
Für weitere Antworten geschlossen.

Billbos

Neues Mitglied
Hallo,

ich habe echt schon fast überall geschaut, wo man nur schauen kann, ich verstehe es trotzdem nicht ganz!
Ich möchte eine Runde Box mit CSS erstellen.
Mit Photoshop habe ich vier Viertelkreise erstellt jedes dieser Viertelkreise ist 40px * 40px. Hintergrundfarbe #0d2b40.
Ich habe meinen Versuch hochgelden.

Daniel Jannes Weiner

Hier der das CSS und INDEX

Ich würde gerne eine 600px breite und 500px hohe Box mit runden Ecken erstellen was muss ich verändern oder ergänzen?

Liebe Grüße

Billbos

CSS

Code:
@charset "utf-8"; 
/* CSS djw_LAYOUT */ 
 
#box { 
margin: 0; 
} 
 
.lt { 
background: url(../bilder_rohdatein/box-kanten/left-top.png) top left no-repeat; 
} 
 
.rt { 
background: url(../bilder_rohdatein/box-kanten/right-top.png) top right no-repeat; 
} 
 
.bl { 
background: url(../bilder_rohdatein/box-kanten/left-bottom.png) bottom left no-repeat; 
} 
 
.br { 
background: url(../bilder_rohdatein/box-kanten/right-bottom.png) bottom right no-repeat; 
} 
 
.inhalt { 
width: 250px; 
border: 1px solid; 
}


INDEX

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Daniel Jannes Weiner</title> 
 
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> 
 
<link rel="stylesheet" type="text/css" href="css/LAYOUT.css" /> 
<link rel="stylesheet" type="text/css" /> 
<link rel="stylesheet" type="text/css" /> 
<link rel="stylesheet" type="text/css" /> 
 
</head> 
 
<body> 
 
<div id="main"> 
 
 
 
<div id="header"> 
</div> 
 
 
 
<div id="navigation"> 
</div> 
 
 
 
<div id="container"> 
<div id="box"> 
 <div class="lt"> 
  <div class="lt"> 
   <div class="bl"> 
    <div class="br"> 
     <div class="inhalt"> 
      <p> Hallo das ist eine Box</p> 
     </div> 
    </div> 
   </div> 
  </div> 
 </div> 
</div> 
</div> 
 
 
 
<div id="footer"> 
</div> 
 
</div> 
 
</body> 
</html>
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben