Achieving a circular border with a header enclosed within using CSS

As I continue to expand my knowledge of HTML, CSS, and web development in general, I am currently working on a website for a friend. Utilizing HTML5, CSS3, and Bootstrap 4 for the project, I have created a mockup in Photoshop. Now, I am faced with the task of recreating a specific portion of the design.

The section in question features a slightly rounded border along with a heading. While I am familiar with creating rounded borders using border-radius, I am uncertain about the best approach for adding the header text. Should I use SVG or explore CSS and HTML options?

htmlcss

Answer №1

Fieldset with a legend is a simple and effective example

fieldset {
 width:700px;
  height:300px;
  border:2px solid #ccc;
  position:relative;
   /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 8px; 
  /* Firefox 1-3.6 */
  -moz-border-radius: 8px; 
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 8px; 
}

legend {
 font-size:1.4rem;
  margin-left:5px;
}

fieldset img {
  max-width:200px;
  max-height:300px;
}

fieldset h1.header {
color:#AE8193;
  font-size:2.0rem;
  margin-bottom:10px;
}

fieldset .text {
  float:right;
  width:70%;
}

fieldset .text a.readmore {
  color:#AE8193;
  text-decoration:underline;
  font-size:1.0pt;
  font-size:1.0rem;
}

.clearfix {
  clear:both;
  height:15px;
}
<fieldset>
<legend>Up This Week</legend>

 <img src="http://www.loraccosmetics.com/storeimages/Images/2014-Summer/LORAC-Alter-Ego-Group-medium.jpg" />
  <div class="text">
    <h1 class="header">Title Text</h1>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    <div class="clearfix"></div>
    <a href="#" class="readmore">Read More</a>

</fieldset>

Answer №2

If you're looking for a simple solution, consider using the classic fieldset. The legend will appear within the border.

To give it a little more style, you can apply border-radius:5px to round the corners slightly.

I've quickly put together a visual representation of your request below.

.img{
width:70px;
height:70px;
background-color:blue;
float:left
}

fieldset{
border:1px solid black;
border-radius:5px;
}
<fieldset>

<legend>Up This Week</legend>

<div class="img"></div>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat lorem nec sapien sagittis convallis. Praesent rhoncus a lacus quis semper. Suspendisse potenti. Maecenas et sapien enim.

</fieldset>

Answer №3

To create a unique design, consider utilizing a combination of title and flex to highlight the top border:

img{
position:absolute;
left:20px;
top:20px;
bottom:20px;
width:15%;
height:calc(100% - 40px);
object-fit:cover;
}

div{
box-sizing:border-box;
position:relative;
margin-top:2em;
border:3px solid gray;
border-top:none;
border-radius:5px;
}
div p {
margin:0.5em;
padding-left:calc(15% + 40px);
padding-bottom:20px;
}
h1 {
display:flex;transform:translatey(-0.7em);
margin:0;
}
h1:before,
h1:after
{
box-sizing:border-box;
content:'';
height:0.5em;
margin-top:auto;
border-top:3px solid gray;
}
h1:before {margin-right:0.5em;
padding-left:1em;}
h1:after {margin-left:0.5em;
flex:1;}
<div>

<h1>Up This Week</h1>
<img src="http://lorempixel.com/150/220/nature"/>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat lorem nec sapien sagittis convallis. Praesent rhoncus a lacus quis semper. Suspendisse potenti. Maecenas et sapien enim.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat lorem nec sapien sagittis convallis. Praesent rhoncus a lacus quis semper. Suspendisse potenti. Maecenas et sapien enim.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat lorem nec sapien sagittis convallis. Praesent rhoncus a lacus quis semper. Suspendisse potenti. Maecenas et sapien enim.</p>

</div>

Get creative with your layout style for the text and image elements, showcasing the versatility of unconventional designs. The use of object-fit can offer intriguing ways to manipulate images.

Answer №4

After reviewing the details you provided, here's a helpful hint - consider utilizing the <fieldset> element. You can achieve the mockup section you shared with the following code:

fieldset {
    border-radius: .5em;
    padding: 1em;
    border: 1px #ddd solid;
}
fieldset > p, fieldset > h1 {
    margin: 0px 0px 0px 111px;
}
fieldset h1 {
    font-size: 18px;
}
fieldset > p + p {
    margin-top: 1em;
}
  <fieldset>
   <legend>de Finibus Bonorum et Malorum</legend>
   <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ4UXkL7-MovU2Y1cXlUhg9uZECINIqU8aXjNur9Xm12N93qYBA" align="left">
   <h1>Lorem ipsum dolor sit amet</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><a href="https://www.lipsum.com/" target=_blank">more</a></p>
  </fieldset>

In addition to this approach, you can explore positioning and transform (translate) techniques. By starting with a standard markup structure and then using positioning or transformation, you can enhance the visual presentation of your content.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for updating tabs and their content in React?

Here is where the error occurs in my JavaScript code. I have successfully implemented it in HTML, CSS, and simple JavaScript, but encountered issues when trying to do so in React. My goal is to switch tabs and their corresponding data/content: ...

javascripthtmlcssreactjs

Any advice on how to navigate to a different screen based on the content of a dynamic grid view?

I have a grid view displaying data from my database, with each title representing a separate box. When a title in the grid view is clicked, I want to redirect to a corresponding screen. How can this be achieved? For example, clicking on "Orders" should re ...

javascriptcsshtmlgridviewionic-framework

Exploring the functionalities of a personalized jQuery slider's next button

I created a container div with three inner divs, each having a class of "content" and one of them having a class of "current". My goal was to display only one ".content" at a time and have a "next" button that hides the current div, removes the "current" c ...

javascriptjqueryhtmlcss

Adjust the size of the list items to fit the window as it

My full-width and height div is overlaid by li elements. The li's have a width of 10% and a height of 20vh to create square shapes within the entire div. However, resizing is causing alignment issues for the div. Despite my attempts using % and vh un ...

javascriptjqueryhtmlcss

Presenting CSV data in a tabular format using Angular and TypeScript

I am facing an issue with uploading a CSV file. Even though the table adjusts to the size of the dataset, it appears as if the CSV file is empty. Could this be due to an error in my code or something specific about the CSV file itself? I'm still learn ...

htmlangulartypescriptnpm

Struggling with transitioning from table layout to CSS, specifically encountering difficulty in aligning all elements properly

Back in the "good old days," we used to simply put everything into td cells and it would all line up perfectly. Now, with CSS, things are a bit more complicated. I'm struggling with how to achieve a specific layout. What I want is to have text on the ...

css

Is $ROW not defined?

I am encountering the error message: "Undefined variable: row" when reaching "return ($row);" in the code. Shouldn't $ROW be defined within $ROW[] = Array(...)? <?php function fetchImageState(){ $state = $_GET['state'] ...

phphtmlmysqlmysqli

Adding specific tag attributes to user input in PHP

When accepting user input for a post, I want to allow users to include <a href=""></a> tags. However, I need to insert a class like <a class="user" href=""></a> if any <a> tag is included in the post before saving it to the da ...

phphtmlanchor

Background image of block element overlaps with float element

I am facing a minor issue with positioning a background image on a block element that comes after a floating element. When I float an image to the left, followed by an H1, the H1 flows behind the image, but its actual title appears next to the image due t ...

htmlcsscss-floatbackground-image

Having difficulty encapsulating three.js rendered particles within a single div

I'm facing an issue where the particles generated by my three.js project are not contained within a specific div or html element as intended. Instead of staying within the designated boundaries, the particles are spreading across the entire DOM witho ...

javascriptjqueryhtmlthree.js

programming selenium to interact with a specific element on a webpage

I need to automate the process of opening a specific page and clicking on the performance button using Python. from selenium import webdriver import time browser = webdriver.Chrome('../Downloads/chromedriver.exe') browser.get('https://www. ...

htmlseleniumxpathselenium-chromedriver

Swapping one div for another, all the while incorporating a limited number of buttons within the webpage

I'm faced with a dilemma on my HTML page. In the middle of the content, there's a div that contains 4 links with images and text inside. What I'm looking to achieve is for each link to trigger a complete change in the div when clicked, with ...

javascripthtmlcss

Error encountered in Angular CLI: Attempting to access property 'value' of an undefined variable

I am encountering an issue while trying to retrieve the values of radio buttons and store them in a MySql database. The error message I receive is TypeError: Cannot read property 'value' of undefined. This project involves the use of Angular and ...

javascripthtmlangulartypescriptexpress

What causes the `d-none` class to toggle on and off repeatedly when the distance between two div elements is less than 10 during window resizing?

My primary objective is to display or hide the icon based on the width of the right container and the rightButtonGroupWrapper. If the difference between these widths falls below 10, the icons should be shown, otherwise hidden. However, I'm facing an i ...

javascripthtmlcss

JQuery's attempt to disable the 'hover' feature fails to function as intended

I have a styled table where rows change background colors based on odd and even indexes, with a hover effect included. However, I want to disable the hover effect when a row is selected. Here's the current code snippet: .odd{ background: #f7f7f7 ...

jqueryhtmlcss

Rearrange HTML list items automatically according to changes in numeric sort order

I am working on a web page that features a dynamic ranked list. The items in the list are assigned a specific rank order number which changes based on user interactions elsewhere on the page. I have been exploring different options to automatically reorgan ...

javascripthtmllistsorting

Numerous CSS class attributes

I have been experimenting with creating my own custom progress bar using CSS. While the HTML5 <progress value="10" max="100"></progress> element could work, I prefer to create it from scratch. In my CSS code, I have defined the .progressbar c ...

htmlcss

Creating Stylish Typography with CSS3

Seeking Inspiration Despite my efforts, I haven't been able to identify the name of a particular CSS effect that I'm trying to recreate. This has made it challenging to find examples or tutorials on how to achieve this look using CSS3. I have e ...

cssbootstrap-4

Is there a way to determine if a certain class link within a DIV has been clicked and then replace the DIV's click functionality?

I have multiple DIV elements like the one below on my webpage: <div class='entry'> This is a statement <a title="Search @travel" class="app-context-link" href="">@travel</a> </div> When a DIV with the class .ent ...

javascriptjqueryhtmlonclick

Having trouble with vertical centering in Bootstrap 4 - need assistance

I tried to center text vertically on my webpage using a code snippet that I found, but it didn't work for me. Here is the HTML code I used: <html lang="pl"> <head> <meta charset="utf-8"> <meta name="viewport" content="wid ...

htmlcsstwitter-bootstrapbootstrap-4