kleine runde Ecken

[Detlef G.]

Hallo Luke

Ich würde es wohl so machen:
Ja, wobei ich den Code gakürzt hatte, es fehlen noch die Ecken links- und rechts-oben

Wäre ja nicht schlecht gewesen, das gleich mit anzugeben, und zumindest auf der Beispielseite den relevanten Code nicht zu kürzen.

Eigentlich ist es eine totale Verschwendung, für solche kleinen Rundungen extra Grafiken zu bemühen, oder sind die im Beispiel verwendeten Grafiken auch gakürzt ;-).

Ohne Grafiken (kann allerdings nicht für alle Browser garantieren):
HTML:

  <h2 class="entry_title"><a href="#">Insanely Interesting Blogentry</a></h2>  
   <div style="padding:20px;">blah</div>  

CSS:

.entry_title {  
 margin:0 2px;  
 border:1px solid #8ac503;  
 background-color: #8ac503;  
}  
.entry_title a {  
 margin:0 -2px;  
 background-color: #8ac503;  
 display:block;  
 color: #FFFFFF;  
 font-size: 16px;  
 font-weight: bold;  
 padding: 4px 8px;  
}  

Wenn die Ecken ei klein wenig größer sein sollen:
HTML:

   <div class="entry_title">  
    <h2><a href="#">Insanely Interesting Blogentry</a></h2>  
   </div>  

CSS:

.entry_title {  
 margin:0 3px;  
}  
.entry_title, .entry_title h2 {  
 border:1px solid #8ac503;  
 background-color: #8ac503;  
}  
.entry_title h2, .entry_title a {  
 margin:0 -2px;  
}  
.entry_title a {  
 background-color: #8ac503;  
 display:block;  
 color: #FFFFFF;  
 font-size: 16px;  
 font-weight: bold;  
 padding: 3px 7px;  
}  

Das spart die Grafiken und auch ein paar der zusätzlichen Divs die bei "Runde und andere Ecken für skalierbare Boxen" nötig sind.

Auf Wiederlesen
Detlef